API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 30th, 2020
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.08 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div class="form-builder">
  3.  
  4. <!-- Create Steps header from form groups-->
  5. <el-steps :active="activeStep" align-center>
  6. <template v-for="(formgroup, index) in formData">
  7. <el-step :title="index | camelToWords" :key="`form-group-${index}`" />
  8. </template>
  9. </el-steps>
  10.  
  11. <el-form
  12. :ref="formName"
  13. v-loading="isLoading"
  14. label-width="120px"
  15. :model="formData"
  16. label-position="top">
  17. <template v-for="(formgroup, index, i) in formData">
  18. <div :key="`formgroup-${index}`" v-if="activeStep === i">
  19. <h3>{{ index | camelToWords }}</h3>
  20. <el-row :gutter="10">
  21. <template v-for="(formItem, index2) in formgroup">
  22. <el-col
  23. v-if="(formItem.dependency && checkDependency(formItem.dependency, index, index2)) || !formItem.dependency"
  24. :key="`formItem-${index2}`"
  25. :span="24"
  26. :gutter="0"
  27. :data-testid="`form-${formName}-col-${index2}`">
  28. <transition name="fade">
  29. <el-form-item
  30. :label="formItem.label"
  31. :rules="formItem.validation"
  32. :prop="`${[index]}.${[index2]}.value`">
  33. <template v-if="formItem.type === 'placeholder'">
  34. <div class="placeholder" />
  35. </template>
  36. <!-- Text Input Field -->
  37. <template v-else-if="formItem.type === 'textarea' || formItem.type === 'text' || formItem.type === 'email' || formItem.type === 'tel' || formItem.type === 'number'">
  38. <el-input
  39. v-model="formItem.value"
  40. :type="formItem.type"
  41. :disabled="isLoading"
  42. :placeholder="formItem.placeholder"
  43. :clearable="formItem.clearable"
  44. :data-testid="`form-${formName}-input-${index2}`" />
  45. </template>
  46.  
  47. <!-- Password Input Field -->
  48. <template v-else-if="formItem.type === 'password'">
  49. <el-input
  50. v-model="formItem.value"
  51. :disabled="isLoading"
  52. :placeholder="formItem.placeholder"
  53. :clearable="formItem.clearable"
  54. :data-testid="`form-${formName}-input-${index2}`"
  55. show-password />
  56. </template>
  57.  
  58. <template v-else-if="formItem.type === 'radio'">
  59. <el-radio-group v-model="formItem.value">
  60. <template v-for="(option, index) in formItem.options">
  61. <el-radio :label="option.value" :key="`radio-option-${index}`">{{ option.label }}</el-radio>
  62. </template>
  63. </el-radio-group>
  64. </template>
  65.  
  66. <template v-else-if="formItem.type === 'slider'">
  67. <el-slider
  68. v-model="formItem.value"
  69. :range="formItem.range"
  70. :marks="formItem.marks"
  71. :min="formItem.min"
  72. :max="formItem.max"
  73. :show-stops="formItem.showStops"
  74. :step="formItem.step"
  75. :format-tooltip="formItem.formatTooltip"
  76. />
  77. </template>
  78.  
  79. <!-- Single Date Input Field -->
  80. <template v-else-if="formItem.type === 'time'">
  81. <el-time-picker
  82. v-model="formItem.value"
  83. :picker-options="formItem.options"
  84. :disabled="isLoading"
  85. :placeholder="formItem.placeholder"
  86. :data-testid="`form-${formName}-input-${index2}`" />
  87. </template>
  88.  
  89. <!-- Single Date Input Field -->
  90. <template v-else-if="formItem.type === 'date'">
  91. <el-date-picker
  92. v-model="formItem.value"
  93. type="date"
  94. :disabled="isLoading"
  95. :placeholder="formItem.placeholder"
  96. :picker-options="formItem.options"
  97. :data-testid="`form-${formName}-input-${index2}`" />
  98. </template>
  99.  
  100. <!-- Single Date Time Input Field -->
  101. <template v-else-if="formItem.type === 'dateTime'">
  102. <el-date-picker
  103. v-model="formItem.value"
  104. type="datetime"
  105. :disabled="isLoading"
  106. :placeholder="formItem.placeholder"
  107. :picker-options="formItem.options"
  108. :data-testid="`form-${formName}-input-${index2}`" />
  109. </template>
  110.  
  111. <!-- Single DateRange Input Field -->
  112. <template v-else-if="formItem.type === 'dateRange'">
  113. <el-date-picker
  114. v-model="formItem.value"
  115. type="daterange"
  116. range-separator="To"
  117. start-placeholder="Start date"
  118. end-placeholder="End date"
  119. :picker-options="formItem.options"
  120. :disabled="isLoading"
  121. :placeholder="formItem.placeholder"
  122. :data-testid="`form-${formName}-input-${index2}`" />
  123. </template>
  124.  
  125. <!-- Color Picker Input Field -->
  126. <template v-else-if="formItem.type === 'color'">
  127. <el-color-picker
  128. v-model="formItem.value"
  129. :color-format="formItem.colorFormat"
  130. :predefine="formItem.predefinedColors"
  131. :data-testid="`form-${formName}-input-${index2}`" />
  132. </template>
  133.  
  134. <template v-else-if="formItem.type === 'switch'">
  135. <el-switch
  136. v-model="formItem.value"
  137. active-color="#35c58b"
  138. inactive-color="#ddd"
  139. :data-testid="`form-${formName}-input-${index2}`" />
  140. </template>
  141.  
  142. <template v-else-if="formItem.type === 'select'">
  143. <el-select
  144. v-model="formItem.value"
  145. filterable
  146. class="dpl-block"
  147. :placeholder="formItem.placeholder"
  148. :data-testid="`form-${formName}-input-${index2}`">
  149. <el-option
  150. v-for="item in formItem.options"
  151. :key="item.value"
  152. :label="item.label"
  153. :value="item.value">
  154. <template v-if="!formItem.hideLabel">
  155. <span style="float: left">{{ item.label }}</span>
  156. <span style="float: right; color: #8492a6; font-size: 0.8em">{{ item.value }}</span>
  157. </template>
  158. </el-option>
  159. </el-select>
  160. </template>
  161.  
  162. <template v-else-if="formItem.type === 'image-upload'">
  163. <el-upload
  164. class="image-uploader"
  165. :action="formItem.uploadAction"
  166. :show-file-list="false"
  167. :on-success="formItem.uploadSuccess"
  168. :before-upload="formItem.beforeUpload"
  169. :on-preview="formItem.handlePreview">
  170. <img
  171. v-if="formItem.imageUrl"
  172. :src="formItem.imageUrl"
  173. class="image">
  174. <i
  175. v-else
  176. class="el-icon-plus image-uploader-icon" /> Upload Image
  177. </el-upload>
  178. </template>
  179.  
  180. <div
  181. v-if="formItem.help"
  182. class="system-message-container info">
  183. {{ formItem.help }}
  184. </div>
  185. </el-form-item>
  186. </transition>
  187. </el-col>
  188. </template>
  189. </el-row>
  190. </div>
  191. </template>
  192. <transition name="fade">
  193. <el-alert
  194. v-if="formError"
  195. title="Please fill out all required fields."
  196. type="error"
  197. effect="dark" />
  198. </transition>
  199. <template v-if="finalStep !== (activeStep + 1)">
  200. <el-button style="margin-top: 12px;" :key="`step-${index}`" @click="activeStep = activeStep + 1">Next step &rsaquo;</el-button>
  201. </template>
  202. <template v-if="activeStep !== 0">
  203. <el-button style="margin-top: 12px;" :key="`step-${index}`" @click="activeStep = activeStep - 1">&lsaquo; Previous step</el-button>
  204. </template>
  205.  
  206. <template v-if="finalStep === (activeStep + 1)">
  207. <footer>
  208. <transition name="fade">
  209. <FormFooterOptions v-if="formUpdated">
  210. <button
  211. class="button btn-cancel"
  212. @click="cancelForm(formName)">
  213. Cancel Changes
  214. </button>
  215. <button
  216. class="button cta"
  217. @click="submitForm(formName)">
  218. Submit Changes
  219. </button>
  220. </FormFooterOptions>
  221. </transition>
  222. </footer>
  223. </template>
  224. </el-form>
  225. <!-- <el-button style="margin-top: 12px;" :key="`step-${index}`">Next step</el-button>-->
  226. </div>
  227. </template>
  228.  
  229. <script>
  230. import FormFooterOptions from "./FormFooterOptions"
  231. export default {
  232. name: "CoreFormBuilderElementUIHandler",
  233. components: {
  234. FormFooterOptions
  235. },
  236. filters: {
  237. camelToWords(string) {
  238. const result = string.replace(/([A-Z])/g, " $1")
  239. return result.charAt(0).toUpperCase() + result.slice(1)
  240. }
  241. },
  242. props: {
  243. value: {
  244. type: Object,
  245. required: true
  246. },
  247. isLoading: {
  248. type: Boolean,
  249. default: false
  250. },
  251. formName: {
  252. type: String,
  253. default: "defaultForm"
  254. }
  255. },
  256. data() {
  257. return {
  258. formUpdated: false,
  259. formError: false,
  260. activeStep: 0
  261. }
  262. },
  263. computed: {
  264. finalStep() {
  265. return Object.keys(this.value).length
  266. },
  267. formData: {
  268. get() {
  269. return this.value
  270. },
  271. set(val) {
  272. console.log(val)
  273. }
  274. }
  275. },
  276. watch: {
  277. formData: {
  278. handler(val) {
  279. if (val && !this.initialising) {
  280. this.formUpdated = true
  281. }
  282. },
  283. deep: true
  284. }
  285. },
  286. methods: {
  287. checkDependency(value, key) {
  288. if (typeof value === "object") {
  289. if (value.value === '*') {
  290. return this.formData[key][value.field].value != null
  291. } else {
  292. return this.formData[key][value.field].value === value.value
  293. }
  294. } else {
  295. return this.formData[key][value].value
  296. }
  297. },
  298. submitForm(formName) {
  299. this.$refs[formName].validate(valid => {
  300. if (valid) {
  301. this.formError = false
  302. this.$emit("submitForm", this.formData)
  303. } else {
  304. this.formError = true
  305. return false
  306. }
  307. })
  308. },
  309. cancelForm(formName) {
  310. this.$refs[formName].resetFields()
  311. this.$emit("cancelForm")
  312. }
  313. },
  314. created() {
  315.  
  316. }
  317. }
  318. </script>
  319.  
  320. <style lang="scss" scoped>
  321. /deep/ .el-form--label-top {
  322. .el-form-item__label {
  323. margin: 0;
  324. padding: 0;
  325. }
  326. }
  327. /deep/ .options-panel {
  328. margin: 4em -2em 0 -2em;
  329. }
  330.  
  331. /deep/ .el-input__icon,
  332. /deep/ .el-date-editor .el-range__icon {
  333. color: #787879;
  334. }
  335.  
  336. /deep/ .el-form-item__label {
  337. font-weight: bold;
  338. }
  339.  
  340. footer {
  341. margin-top: 3em;
  342. }
  343. .dpl-block {
  344. display: block;
  345. }
  346. .placeholder {
  347. width: 100%;
  348. height: 6em;
  349. }
  350. .image-uploader {
  351. border-radius: 6px;
  352. cursor: pointer;
  353. position: relative;
  354. overflow: hidden;
  355. border: 1px dashed var(--main-border-color);
  356. transition: var(--main-transition);
  357. }
  358. .image-uploader:hover {
  359. border-color: var(--main-darker-grey);
  360. background: var(--main-light-blue);
  361. }
  362. .image-uploader-icon {
  363. font-size: 1em;
  364. color: #8c939d;
  365. width: 1em;
  366. height: 1em;
  367. margin: 0 1em;
  368. line-height: 1em;
  369. text-align: center;
  370. }
  371. .image {
  372. width: 1em;
  373. height: 1em;
  374. display: block;
  375. }
  376. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!