WidgetConfig.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  1. <template>
  2. <div v-if="show">
  3. <el-form label-position="top">
  4. <el-form-item :label="$t('fm.config.widget.model')" v-if="data.type!='grid'">
  5. <el-input v-model="data.model"></el-input>
  6. </el-form-item>
  7. <el-form-item :label="$t('fm.config.widget.name')" v-if="data.type!='grid'">
  8. <el-input v-model="data.name"></el-input>
  9. </el-form-item>
  10. <el-form-item :label="$t('fm.config.widget.width')" v-if="Object.keys(data.options).indexOf('width')>=0">
  11. <el-input v-model="data.options.width"></el-input>
  12. </el-form-item>
  13. <el-form-item :label="$t('fm.config.widget.height')" v-if="Object.keys(data.options).indexOf('height')>=0">
  14. <el-input v-model="data.options.height"></el-input>
  15. </el-form-item>
  16. <el-form-item :label="$t('fm.config.widget.size')" v-if="Object.keys(data.options).indexOf('size')>=0">
  17. {{$t('fm.config.widget.width')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.width"></el-input>
  18. {{$t('fm.config.widget.height')}} <el-input style="width: 90px;" type="number" v-model.number="data.options.size.height"></el-input>
  19. </el-form-item>
  20. <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date')">
  21. <el-input v-model="data.options.placeholder"></el-input>
  22. </el-form-item>
  23. <el-form-item :label="$t('fm.config.widget.layout')" v-if="Object.keys(data.options).indexOf('inline')>=0">
  24. <el-radio-group v-model="data.options.inline">
  25. <el-radio-button :label="false">{{$t('fm.config.widget.block')}}</el-radio-button>
  26. <el-radio-button :label="true">{{$t('fm.config.widget.inline')}}</el-radio-button>
  27. </el-radio-group>
  28. </el-form-item>
  29. <el-form-item :label="$t('fm.config.widget.showInput')" v-if="Object.keys(data.options).indexOf('showInput')>=0">
  30. <el-switch v-model="data.options.showInput" ></el-switch>
  31. </el-form-item>
  32. <el-form-item :label="$t('fm.config.widget.min')" v-if="Object.keys(data.options).indexOf('min')>=0">
  33. <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"></el-input-number>
  34. </el-form-item>
  35. <el-form-item :label="$t('fm.config.widget.max')" v-if="Object.keys(data.options).indexOf('max')>=0">
  36. <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"></el-input-number>
  37. </el-form-item>
  38. <el-form-item :label="$t('fm.config.widget.step')" v-if="Object.keys(data.options).indexOf('step')>=0">
  39. <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"></el-input-number>
  40. </el-form-item>
  41. <el-form-item :label="$t('fm.config.widget.multiple')" v-if="data.type=='select' || data.type=='imgupload'">
  42. <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
  43. </el-form-item>
  44. <el-form-item :label="$t('fm.config.widget.filterable')" v-if="data.type=='select'">
  45. <el-switch v-model="data.options.filterable"></el-switch>
  46. </el-form-item>
  47. <el-form-item :label="$t('fm.config.widget.allowHalf')" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
  48. <el-switch
  49. v-model="data.options.allowHalf"
  50. >
  51. </el-switch>
  52. </el-form-item>
  53. <el-form-item :label="$t('fm.config.widget.showAlpha')" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
  54. <el-switch
  55. v-model="data.options.showAlpha"
  56. >
  57. </el-switch>
  58. </el-form-item>
  59. <el-form-item :label="$t('fm.config.widget.showLabel')" v-if="Object.keys(data.options).indexOf('showLabel')>=0">
  60. <el-switch
  61. v-model="data.options.showLabel"
  62. >
  63. </el-switch>
  64. </el-form-item>
  65. <el-form-item :label="$t('fm.config.widget.option')" v-if="Object.keys(data.options).indexOf('options')>=0">
  66. <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
  67. <el-radio-button :label="false">{{$t('fm.config.widget.staticData')}}</el-radio-button>
  68. <el-radio-button :label="true">{{$t('fm.config.widget.remoteData')}}</el-radio-button>
  69. </el-radio-group>
  70. <template v-if="data.options.remote">
  71. <div>
  72. <el-input size="mini" style="" v-model="data.options.remoteFunc">
  73. <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
  74. </el-input>
  75. <el-input size="mini" style="" v-model="data.options.props.value">
  76. <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
  77. </el-input>
  78. <el-input size="mini" style="" v-model="data.options.props.label">
  79. <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
  80. </el-input>
  81. </div>
  82. </template>
  83. <template v-else>
  84. <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
  85. <el-radio-group v-model="data.options.defaultValue">
  86. <draggable tag="ul" :list="data.options.options"
  87. v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
  88. handle=".drag-item"
  89. >
  90. <li v-for="(item, index) in data.options.options" :key="index" >
  91. <el-radio
  92. :label="item.value"
  93. style="margin-right: 5px;"
  94. >
  95. <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
  96. <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
  97. <!-- <input v-model="item.value"/> -->
  98. </el-radio>
  99. <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
  100. <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
  101. </li>
  102. </draggable>
  103. </el-radio-group>
  104. </template>
  105. <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
  106. <el-checkbox-group v-model="data.options.defaultValue">
  107. <draggable tag="ul" :list="data.options.options"
  108. v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
  109. handle=".drag-item"
  110. >
  111. <li v-for="(item, index) in data.options.options" :key="index" >
  112. <el-checkbox
  113. :label="item.value"
  114. style="margin-right: 5px;"
  115. >
  116. <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
  117. <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
  118. </el-checkbox>
  119. <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
  120. <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
  121. </li>
  122. </draggable>
  123. </el-checkbox-group>
  124. </template>
  125. <div style="margin-left: 22px;">
  126. <el-button type="text" @click="handleAddOption">{{$t('fm.actions.addOption')}}</el-button>
  127. </div>
  128. </template>
  129. </el-form-item>
  130. <el-form-item :label="$t('fm.config.widget.option')" v-if="data.type=='dynamicTable'">
  131. <draggable tag="ul" :list="data.options.tableColumns"
  132. v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
  133. handle=".drag-item"
  134. >
  135. <li v-for="(item, index) in data.options.tableColumns" :key="index" style="display: flex;">
  136. <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.label"></el-input>
  137. <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.prop"></el-input>
  138. <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
  139. <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
  140. </li>
  141. <div style="margin-left: 22px;">
  142. <el-button type="text" @click="handleAddTableColumn">{{$t('fm.actions.addOption')}}</el-button>
  143. </div>
  144. </draggable>
  145. </el-form-item>
  146. <el-form-item :label="$t('fm.config.widget.remoteData')" v-if="data.type=='cascader'">
  147. <div>
  148. <el-input size="mini" style="" v-model="data.options.remoteFunc">
  149. <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
  150. </el-input>
  151. <el-input size="mini" style="" v-model="data.options.props.value">
  152. <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
  153. </el-input>
  154. <el-input size="mini" style="" v-model="data.options.props.label">
  155. <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
  156. </el-input>
  157. <el-input size="mini" style="" v-model="data.options.props.children">
  158. <template slot="prepend">{{$t('fm.config.widget.childrenOption')}}</template>
  159. </el-input>
  160. </div>
  161. </el-form-item>
  162. <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch' || data.type=='text')">
  163. <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></el-input>
  164. <el-input v-if="data.type=='input'" v-model="data.options.defaultValue"></el-input>
  165. <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"></el-rate>
  166. <el-button type="text" v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{$t('fm.actions.clear')}}</el-button>
  167. <el-color-picker
  168. v-if="data.type == 'color'"
  169. v-model="data.options.defaultValue"
  170. :show-alpha="data.options.showAlpha"
  171. ></el-color-picker>
  172. <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
  173. <el-input v-if="data.type=='text'" v-model="data.options.defaultValue"></el-input>
  174. </el-form-item>
  175. <el-form-item :label="$t('fm.config.widget.maxlength')" v-if="(data.type == 'textarea' || data.type == 'input')">
  176. <el-input-number v-model="data.options.maxlength" :min="-1" ></el-input-number>
  177. </el-form-item>
  178. <el-form-item :label="$t('fm.config.widget.showWordLimit')" v-if="(data.type == 'textarea' || data.type == 'input')">
  179. <el-switch v-model="data.options.showWordLimit" ></el-switch>
  180. </el-form-item>
  181. <template v-if="data.type == 'time' || data.type == 'date'">
  182. <el-form-item :label="$t('fm.config.widget.showType')" v-if="data.type == 'date'">
  183. <el-select v-model="data.options.type">
  184. <el-option value="year"></el-option>
  185. <el-option value="month"></el-option>
  186. <el-option value="date"></el-option>
  187. <el-option value="dates"></el-option>
  188. <!-- <el-option value="week"></el-option> -->
  189. <el-option value="datetime"></el-option>
  190. <el-option value="datetimerange"></el-option>
  191. <el-option value="daterange"></el-option>
  192. </el-select>
  193. </el-form-item>
  194. <el-form-item :label="$t('fm.config.widget.isRange')" v-if="data.type == 'time'">
  195. <el-switch
  196. v-model="data.options.isRange"
  197. >
  198. </el-switch>
  199. </el-form-item>
  200. <el-form-item :label="$t('fm.config.widget.isTimestamp')" v-if="data.type == 'date'">
  201. <el-switch
  202. v-model="data.options.timestamp"
  203. >
  204. </el-switch>
  205. </el-form-item>
  206. <el-form-item :label="$t('fm.config.widget.placeholder')" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
  207. <el-input v-model="data.options.placeholder"></el-input>
  208. </el-form-item>
  209. <el-form-item :label="$t('fm.config.widget.startPlaceholder')" v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'">
  210. <el-input v-model="data.options.startPlaceholder"></el-input>
  211. </el-form-item>
  212. <el-form-item :label="$t('fm.config.widget.endPlaceholder')" v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'">
  213. <el-input v-model="data.options.endPlaceholder"></el-input>
  214. </el-form-item>
  215. <el-form-item :label="$t('fm.config.widget.format')">
  216. <el-input v-model="data.options.format"></el-input>
  217. </el-form-item>
  218. <el-form-item :label="$t('fm.config.widget.defaultValue')" v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0">
  219. <el-time-picker
  220. key="1"
  221. style="width: 100%;"
  222. v-if="!data.options.isRange"
  223. v-model="data.options.defaultValue"
  224. :arrowControl="data.options.arrowControl"
  225. :value-format="data.options.format"
  226. >
  227. </el-time-picker>
  228. <el-time-picker
  229. key="2"
  230. v-if="data.options.isRange"
  231. style="width: 100%;"
  232. v-model="data.options.defaultValue"
  233. is-range
  234. :arrowControl="data.options.arrowControl"
  235. :value-format="data.options.format"
  236. >
  237. </el-time-picker>
  238. </el-form-item>
  239. </template>
  240. <template v-if="data.type=='imgupload'">
  241. <el-form-item :label="$t('fm.config.widget.limit')">
  242. <el-input type="number" v-model.number="data.options.length"></el-input>
  243. </el-form-item>
  244. <el-form-item :label="$t('fm.config.widget.isQiniu')">
  245. <el-switch v-model="data.options.isQiniu"></el-switch>
  246. </el-form-item>
  247. <template v-if="data.options.isQiniu">
  248. <el-form-item label="Domain" :required="true">
  249. <el-input v-model="data.options.domain"></el-input>
  250. </el-form-item>
  251. <el-form-item :label="$t('fm.config.widget.tokenFunc')" :required="true">
  252. <el-input v-model="data.options.tokenFunc"></el-input>
  253. </el-form-item>
  254. </template>
  255. <template v-else>
  256. <el-form-item :label="$t('fm.config.widget.imageAction')" :required="true">
  257. <el-input v-model="data.options.action"></el-input>
  258. </el-form-item>
  259. </template>
  260. </template>
  261. <template v-if="data.type=='blank'">
  262. <el-form-item :label="$t('fm.config.widget.defaultType')">
  263. <el-select v-model="data.options.defaultType">
  264. <el-option value="String" :label="$t('fm.config.widget.string')"></el-option>
  265. <el-option value="Object" :label="$t('fm.config.widget.object')"></el-option>
  266. <el-option value="Array" :label="$t('fm.config.widget.array')"></el-option>
  267. </el-select>
  268. </el-form-item>
  269. </template>
  270. <template v-if="data.type == 'grid'">
  271. <el-form-item :label="$t('fm.config.widget.gutter')">
  272. <el-input type="number" v-model.number="data.options.gutter"></el-input>
  273. </el-form-item>
  274. <el-form-item :label="$t('fm.config.widget.columnOption')">
  275. <draggable tag="ul" :list="data.columns"
  276. v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
  277. handle=".drag-item"
  278. >
  279. <li v-for="(item, index) in data.columns" :key="index" >
  280. <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
  281. <el-input :placeholder="$t('fm.config.widget.span')" size="mini" style="width: 100px;" type="number" v-model.number="item.span"></el-input>
  282. <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
  283. </li>
  284. </draggable>
  285. <div style="margin-left: 22px;">
  286. <el-button type="text" @click="handleAddColumn">{{$t('fm.actions.addColumn')}}</el-button>
  287. </div>
  288. </el-form-item>
  289. <el-form-item :label="$t('fm.config.widget.justify')">
  290. <el-select v-model="data.options.justify">
  291. <el-option value="start" :label="$t('fm.config.widget.justifyStart')"></el-option>
  292. <el-option value="end" :label="$t('fm.config.widget.justifyEnd')"></el-option>
  293. <el-option value="center" :label="$t('fm.config.widget.justifyCenter')"></el-option>
  294. <el-option value="space-around" :label="$t('fm.config.widget.justifySpaceAround')"></el-option>
  295. <el-option value="space-between" :label="$t('fm.config.widget.justifySpaceBetween')"></el-option>
  296. </el-select>
  297. </el-form-item>
  298. <el-form-item :label="$t('fm.config.widget.align')">
  299. <el-select v-model="data.options.align">
  300. <el-option value="top" :label="$t('fm.config.widget.alignTop')"></el-option>
  301. <el-option value="middle" :label="$t('fm.config.widget.alignMiddle')"></el-option>
  302. <el-option value="bottom" :label="$t('fm.config.widget.alignBottom')"></el-option>
  303. </el-select>
  304. </el-form-item>
  305. </template>
  306. <template v-if="data.type != 'grid'">
  307. <el-form-item :label="$t('fm.config.widget.attribute')">
  308. <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">{{$t('fm.config.widget.readonly')}}</el-checkbox>
  309. <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">{{$t('fm.config.widget.disabled')}} </el-checkbox>
  310. <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">{{$t('fm.config.widget.editable')}}</el-checkbox>
  311. <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">{{$t('fm.config.widget.clearable')}} </el-checkbox>
  312. <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">{{$t('fm.config.widget.arrowControl')}}</el-checkbox>
  313. <el-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete')>=0">{{$t('fm.config.widget.isDelete')}}</el-checkbox>
  314. <el-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit')>=0">{{$t('fm.config.widget.isEdit')}}</el-checkbox>
  315. </el-form-item>
  316. <el-form-item :label="$t('fm.config.widget.validate')">
  317. <div v-if="Object.keys(data.options).indexOf('required')>=0">
  318. <el-checkbox v-model="data.options.required">{{$t('fm.config.widget.required')}}</el-checkbox>
  319. </div>
  320. <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
  321. <el-option value="string" :label="$t('fm.config.widget.string')"></el-option>
  322. <el-option value="number" :label="$t('fm.config.widget.number')"></el-option>
  323. <el-option value="boolean" :label="$t('fm.config.widget.boolean')"></el-option>
  324. <el-option value="integer" :label="$t('fm.config.widget.integer')"></el-option>
  325. <el-option value="float" :label="$t('fm.config.widget.float')"></el-option>
  326. <el-option value="url" :label="$t('fm.config.widget.url')"></el-option>
  327. <el-option value="email" :label="$t('fm.config.widget.email')"></el-option>
  328. <el-option value="hex" :label="$t('fm.config.widget.hex')"></el-option>
  329. </el-select>
  330. <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
  331. <el-input size="mini" class="config-pattern-input" v-model.lazy="data.options.pattern" style=" width: 240px;" :placeholder="$t('fm.config.widget.patternPlaceholder')">
  332. <template slot="prepend" >/</template>
  333. <template slot="append" >/</template>
  334. </el-input>
  335. </div>
  336. </el-form-item>
  337. </template>
  338. </el-form>
  339. </div>
  340. </template>
  341. <script>
  342. import Draggable from 'vuedraggable'
  343. export default {
  344. components: {
  345. Draggable
  346. },
  347. props: ['data'],
  348. data () {
  349. return {
  350. validator: {
  351. type: null,
  352. required: null,
  353. pattern: null,
  354. range: null,
  355. length: null
  356. }
  357. }
  358. },
  359. computed: {
  360. show () {
  361. if (this.data && Object.keys(this.data).length > 0) {
  362. return true
  363. }
  364. return false
  365. }
  366. },
  367. methods: {
  368. handleOptionsRemove (index) {
  369. if (this.data.type === 'grid') {
  370. this.data.columns.splice(index, 1)
  371. } else if (this.data.type === 'dynamicTable'){
  372. this.data.options.tableColumns.splice(index, 1)
  373. } else {
  374. this.data.options.options.splice(index, 1)
  375. }
  376. },
  377. handleAddOption () {
  378. console.log(this.data.options)
  379. if (this.data.options.showLabel) {
  380. this.data.options.options.push({
  381. value: this.$t('fm.config.widget.newOption'),
  382. label: this.$t('fm.config.widget.newOption')
  383. })
  384. } else {
  385. this.data.options.options.push({
  386. value: this.$t('fm.config.widget.newOption')
  387. })
  388. }
  389. },
  390. handleAddTableColumn () {
  391. this.data.options.tableColumns.push({
  392. prop: this.$t('fm.config.widget.newColumnProp'),
  393. label: this.$t('fm.config.widget.newColumnLabel')
  394. })
  395. // if (this.data.options.showLabel) {
  396. // } else {
  397. // this.data.options.tableColumns.push({
  398. // value: this.$t('fm.config.widget.newOption')
  399. // })
  400. // }
  401. },
  402. handleAddColumn () {
  403. this.data.columns.push({
  404. span: '',
  405. list: []
  406. })
  407. },
  408. generateRule () {
  409. this.data.rules = []
  410. Object.keys(this.validator).forEach(key => {
  411. if (this.validator[key]) {
  412. this.data.rules.push(this.validator[key])
  413. }
  414. })
  415. },
  416. handleSelectMuliple (value) {
  417. if (value) {
  418. if (this.data.options.defaultValue) {
  419. this.data.options.defaultValue = [this.data.options.defaultValue]
  420. } else {
  421. this.data.options.defaultValue = []
  422. }
  423. } else {
  424. if (this.data.options.defaultValue.length>0){
  425. this.data.options.defaultValue = this.data.options.defaultValue[0]
  426. } else {
  427. this.data.options.defaultValue = ''
  428. }
  429. }
  430. },
  431. validateRequired (val) {
  432. if (val) {
  433. this.validator.required = {required: true, message: `${this.data.name}${this.$t('fm.config.widget.validatorRequired')}`}
  434. } else {
  435. this.validator.required = null
  436. }
  437. this.$nextTick(() => {
  438. this.generateRule()
  439. })
  440. },
  441. validateDataType (val) {
  442. if (!this.show) {
  443. return false
  444. }
  445. if (val) {
  446. this.validator.type = {type: val, message: this.data.name + this.$t('fm.config.widget.validatorType')}
  447. } else {
  448. this.validator.type = null
  449. }
  450. this.generateRule()
  451. },
  452. valiatePattern (val) {
  453. if (!this.show) {
  454. return false
  455. }
  456. if (val) {
  457. this.validator.pattern = {pattern: val, message: this.data.name + this.$t('fm.config.widget.validatorPattern')}
  458. } else {
  459. this.validator.pattern = null
  460. }
  461. this.generateRule()
  462. }
  463. },
  464. watch: {
  465. 'data.options.isRange': function(val) {
  466. if (typeof val !== 'undefined') {
  467. if (val) {
  468. this.data.options.defaultValue = null
  469. } else {
  470. if (Object.keys(this.data.options).indexOf('defaultValue')>=0)
  471. this.data.options.defaultValue = ''
  472. }
  473. }
  474. },
  475. 'data.options.required': function(val) {
  476. this.validateRequired(val)
  477. },
  478. 'data.options.dataType': function (val) {
  479. this.validateDataType(val)
  480. },
  481. 'data.options.pattern': function (val) {
  482. this.valiatePattern(val)
  483. },
  484. 'data.name': function (val) {
  485. if (this.data.options) {
  486. this.validateRequired(this.data.options.required)
  487. this.validateDataType(this.data.options.dataType)
  488. this.valiatePattern(this.data.options.pattern)
  489. }
  490. }
  491. }
  492. }
  493. </script>