GenerateFormItem.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. <template>
  2. <el-form-item :label="widget.name" :prop="widget.model">
  3. <template v-if="widget.type == 'input'" >
  4. <el-input
  5. v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
  6. type="number"
  7. v-model.number="dataModel"
  8. :placeholder="widget.options.placeholder"
  9. :style="{width: widget.options.width}"
  10. :disabled="widget.options.disabled"
  11. ></el-input>
  12. <el-input
  13. v-else
  14. type="text"
  15. v-model="dataModel"
  16. :disabled="widget.options.disabled"
  17. :placeholder="widget.options.placeholder"
  18. :style="{width: widget.options.width}"
  19. :maxlength="widget.options.maxlength"
  20. :show-word-limit="widget.options.showWordLimit"
  21. ></el-input>
  22. </template>
  23. <template v-if="widget.type == 'textarea'">
  24. <el-input type="textarea" :rows="5"
  25. v-model="dataModel"
  26. :disabled="widget.options.disabled"
  27. :placeholder="widget.options.placeholder"
  28. :style="{width: widget.options.width}"
  29. :maxlength="widget.options.maxlength"
  30. :show-word-limit="widget.options.showWordLimit"
  31. ></el-input>
  32. </template>
  33. <template v-if="widget.type == 'number'">
  34. <el-input-number
  35. v-model="dataModel"
  36. :style="{width: widget.options.width}"
  37. :step="widget.options.step"
  38. controls-position="right"
  39. :disabled="widget.options.disabled"
  40. :min="widget.options.min"
  41. :max="widget.options.max"
  42. ></el-input-number>
  43. </template>
  44. <template v-if="widget.type == 'radio'">
  45. <el-radio-group v-model="dataModel"
  46. :style="{width: widget.options.width}"
  47. :disabled="widget.options.disabled"
  48. >
  49. <el-radio
  50. :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
  51. :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
  52. >
  53. <template v-if="widget.options.remote">{{item.label}}</template>
  54. <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
  55. </el-radio>
  56. </el-radio-group>
  57. </template>
  58. <template v-if="widget.type == 'checkbox'">
  59. <el-checkbox-group v-model="dataModel"
  60. :style="{width: widget.options.width}"
  61. :disabled="widget.options.disabled"
  62. >
  63. <el-checkbox
  64. :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
  65. :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
  66. >
  67. <template v-if="widget.options.remote">{{item.label}}</template>
  68. <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
  69. </el-checkbox>
  70. </el-checkbox-group>
  71. </template>
  72. <template v-if="widget.type == 'time'">
  73. <el-time-picker
  74. v-model="dataModel"
  75. :is-range="widget.options.isRange"
  76. :placeholder="widget.options.placeholder"
  77. :start-placeholder="widget.options.startPlaceholder"
  78. :end-placeholder="widget.options.endPlaceholder"
  79. :readonly="widget.options.readonly"
  80. :disabled="widget.options.disabled"
  81. :editable="widget.options.editable"
  82. :clearable="widget.options.clearable"
  83. :arrowControl="widget.options.arrowControl"
  84. :value-format="widget.options.format"
  85. :style="{width: widget.options.width}"
  86. >
  87. </el-time-picker>
  88. </template>
  89. <template v-if="widget.type=='date'">
  90. <el-date-picker
  91. v-model="dataModel"
  92. :type="widget.options.type"
  93. :placeholder="widget.options.placeholder"
  94. :start-placeholder="widget.options.startPlaceholder"
  95. :end-placeholder="widget.options.endPlaceholder"
  96. :readonly="widget.options.readonly"
  97. :disabled="widget.options.disabled"
  98. :editable="widget.options.editable"
  99. :clearable="widget.options.clearable"
  100. :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
  101. :format="widget.options.format"
  102. :style="{width: widget.options.width}"
  103. >
  104. </el-date-picker>
  105. </template>
  106. <template v-if="widget.type =='rate'">
  107. <el-rate v-model="dataModel"
  108. :max="widget.options.max"
  109. :disabled="widget.options.disabled"
  110. :allow-half="widget.options.allowHalf"
  111. ></el-rate>
  112. </template>
  113. <template v-if="widget.type == 'color'">
  114. <el-color-picker
  115. v-model="dataModel"
  116. :disabled="widget.options.disabled"
  117. :show-alpha="widget.options.showAlpha"
  118. ></el-color-picker>
  119. </template>
  120. <template v-if="widget.type == 'select'">
  121. <el-select
  122. v-model="dataModel"
  123. :disabled="widget.options.disabled"
  124. :multiple="widget.options.multiple"
  125. :clearable="widget.options.clearable"
  126. :placeholder="widget.options.placeholder"
  127. :style="{width: widget.options.width}"
  128. :filterable="widget.options.filterable"
  129. >
  130. <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"></el-option>
  131. </el-select>
  132. </template>
  133. <template v-if="widget.type=='switch'">
  134. <el-switch
  135. v-model="dataModel"
  136. :disabled="widget.options.disabled"
  137. >
  138. </el-switch>
  139. </template>
  140. <template v-if="widget.type=='slider'">
  141. <el-slider
  142. v-model="dataModel"
  143. :min="widget.options.min"
  144. :max="widget.options.max"
  145. :disabled="widget.options.disabled"
  146. :step="widget.options.step"
  147. :show-input="widget.options.showInput"
  148. :range="widget.options.range"
  149. :style="{width: widget.options.width}"
  150. ></el-slider>
  151. </template>
  152. <template v-if="widget.type=='dynamicTable'">
  153. <el-table :data="models[widget.model]" style="width: 100%" class="u-dynamic-table" stripe border>
  154. <el-table-column
  155. v-for="item in widget.options.tableColumns"
  156. :key="item.prop"
  157. :fixed="item.fixed"
  158. align="center"
  159. :prop="item.prop"
  160. :min-width="item.minWidth"
  161. :width="item.width"
  162. :show-overflow-tooltip="item.tooltip"
  163. :resizable="item.resizable"
  164. :label="item.label"
  165. >
  166. <template slot-scope="scope">
  167. <el-form-item :prop="[widget.model]+ '.'+scope.$index+ '.'+item.prop">
  168. <el-input v-model="scope.row[item.prop]" placeholder="请输入" />
  169. </el-form-item>
  170. </template>
  171. </el-table-column>
  172. </el-table>
  173. <div class="btn" @click="handleAddTableRow"><i class="el-icon-plus"></i>新增</div>
  174. </template>
  175. <template v-if="widget.type=='imgupload'">
  176. <fm-upload
  177. v-model="dataModel"
  178. :disabled="widget.options.disabled"
  179. :style="{'width': widget.options.width}"
  180. :width="widget.options.size.width"
  181. :height="widget.options.size.height"
  182. :token="widget.options.token"
  183. :domain="widget.options.domain"
  184. :multiple="widget.options.multiple"
  185. :length="widget.options.length"
  186. :is-qiniu="widget.options.isQiniu"
  187. :is-delete="widget.options.isDelete"
  188. :min="widget.options.min"
  189. :is-edit="widget.options.isEdit"
  190. :action="widget.options.action"
  191. >
  192. </fm-upload>
  193. </template>
  194. <template v-if="widget.type == 'editor'">
  195. <vue-editor
  196. v-model="dataModel"
  197. :style="{width: widget.options.width}"
  198. >
  199. </vue-editor>
  200. </template>
  201. <template v-if="widget.type == 'cascader'">
  202. <el-cascader
  203. v-model="dataModel"
  204. :disabled="widget.options.disabled"
  205. :clearable="widget.options.clearable"
  206. :placeholder="widget.options.placeholder"
  207. :style="{width: widget.options.width}"
  208. :options="widget.options.remoteOptions"
  209. >
  210. </el-cascader>
  211. </template>
  212. <template v-if="widget.type == 'text'">
  213. <span>{{dataModel}}</span>
  214. </template>
  215. </el-form-item>
  216. </template>
  217. <script>
  218. import FmUpload from './Upload'
  219. export default {
  220. props: ['widget', 'models', 'rules', 'remote'],
  221. components: {
  222. FmUpload
  223. },
  224. data () {
  225. return {
  226. dataModel: this.models[this.widget.model]
  227. }
  228. },
  229. created () {
  230. if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
  231. this.remote[this.widget.options.remoteFunc]((data) => {
  232. this.widget.options.remoteOptions = data.map(item => {
  233. return {
  234. value: item[this.widget.options.props.value],
  235. label: item[this.widget.options.props.label],
  236. children: item[this.widget.options.props.children]
  237. }
  238. })
  239. })
  240. }
  241. if (this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
  242. this.remote[this.widget.options.tokenFunc]((data) => {
  243. this.widget.options.token = data
  244. })
  245. }
  246. },
  247. methods: {
  248. handleAddTableRow(){
  249. if(this.widget.type === 'dynamicTable'){
  250. console.log(this.widget)
  251. var arr = this.widget.options.tableColumns.reduce((p, c) => Object.assign(p, { [c.prop]: '' }), {})
  252. console.log(arr)
  253. this.models[this.widget.model].push(arr)
  254. // console.log(this.widget.options.tableData)
  255. }
  256. }
  257. },
  258. watch: {
  259. dataModel: {
  260. deep: true,
  261. handler (val) {
  262. // val和this.dataModel当前改变的数据值;this.widget创建的组件的json代码;this.widget.model = key
  263. // this.models数据值存放位置
  264. this.models[this.widget.model] = val
  265. this.$emit('update:models', {
  266. ...this.models,
  267. [this.widget.model]: val
  268. })
  269. this.$emit('input-change', val, this.widget.model)
  270. // console.log(this.dataModel, this.models)
  271. // console.log(val, this.widget)
  272. }
  273. },
  274. models: {
  275. deep: true,
  276. handler (val) {
  277. // console.log(val, val[this.widget.model])
  278. this.dataModel = val[this.widget.model]
  279. // console.log(this.dataModel)
  280. }
  281. }
  282. }
  283. }
  284. </script>
  285. <style lang="less">
  286. .u-dynamic-table{
  287. .el-table__cell{
  288. padding: 0;
  289. .cell{
  290. padding-left: 0 !important;
  291. padding-right: 0 !important;
  292. }
  293. }
  294. // 当加入校验时需要判断设置
  295. .el-form-item{
  296. margin-bottom: 0;
  297. }
  298. .el-input__inner{
  299. border: none;
  300. }
  301. }
  302. </style>