index.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <script>
  2. import Column from "./column";
  3. import useData from "../hooks/use-data";
  4. import useDicts from "../hooks/use-dicts";
  5. import useTable from "../hooks/use-table";
  6. import useMethods from "../hooks/use-methods";
  7. export default {
  8. name: "AddDrawer",
  9. dicts: useDicts(Column),
  10. components: {},
  11. data() {
  12. return {
  13. title: "新 增",
  14. ...useData(Column),
  15. };
  16. },
  17. computed: {},
  18. watch: {},
  19. methods: {
  20. //
  21. async fetchRefer(prop, type, source) {
  22. const { fetchRefer } = useMethods();
  23. await fetchRefer({ _this: this, prop, type, source });
  24. },
  25. //
  26. async open(prop) {
  27. const { open, fetchItem } = useMethods();
  28. await open({ _this: this });
  29. if (prop) await fetchItem({ _this: this, prop });
  30. },
  31. //
  32. async hide() {
  33. const { hide } = useMethods();
  34. await hide({ _this: this });
  35. },
  36. //
  37. async useRowAdd(prop) {
  38. const { add } = useTable();
  39. await add({ _this: this, prop });
  40. },
  41. //
  42. async useRowRemove(prop, scope) {
  43. const { remove } = useTable();
  44. await remove({ _this: this, prop, scope, type: "ADD" });
  45. },
  46. //
  47. async useSubmit(prop) {
  48. const { add } = useMethods();
  49. await add({ _this: this, prop });
  50. },
  51. },
  52. created() {},
  53. mounted() {},
  54. destroyed() {},
  55. };
  56. </script>
  57. <template>
  58. <el-drawer
  59. :size="width"
  60. :title="title"
  61. :show-close="false"
  62. :visible.sync="visible"
  63. >
  64. <template slot="title">
  65. <span>{{ title }}</span>
  66. <span>
  67. <el-button
  68. :size="size"
  69. circle
  70. icon="el-icon-close"
  71. @click="hide"
  72. ></el-button>
  73. <el-button
  74. :size="size"
  75. circle
  76. icon="el-icon-check"
  77. @click="useSubmit('ruleForm')"
  78. >
  79. </el-button>
  80. </span>
  81. </template>
  82. <el-form
  83. ref="ruleForm"
  84. v-loading="loading"
  85. :size="size"
  86. :rules="rules"
  87. :model="params"
  88. label-width="auto"
  89. label-position="right"
  90. style="padding: 10px"
  91. >
  92. <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
  93. <el-col
  94. v-for="(column, index) in formColumns"
  95. :key="index"
  96. :span="column.span || 8"
  97. >
  98. <el-form-item :prop="column.key" :label="column.title">
  99. <el-input
  100. v-if="column.inputType === 'Input'"
  101. v-model="params[column.key]"
  102. :disabled="column.disabled"
  103. :readonly="column.readonly"
  104. :clearable="column.clearable"
  105. :placeholder="column.placeholder"
  106. style="width: 100%"
  107. ></el-input>
  108. <dr-popover-select
  109. v-if="column.inputType === 'PopoverSelect'"
  110. v-model="params[column.key]"
  111. :source.sync="params"
  112. :title="column.title"
  113. :type="column.referName"
  114. :disabled="column.disabled"
  115. :readonly="column.readonly"
  116. :clearable="column.clearable"
  117. :placeholder="column.placeholder"
  118. :data-mapping="column.dataMapping"
  119. style="width: 100%"
  120. >
  121. </dr-popover-select>
  122. <el-select
  123. v-if="column.inputType === 'Select'"
  124. v-model="params[column.key]"
  125. :disabled="column.disabled"
  126. :clearable="column.clearable"
  127. :placeholder="column.placeholder"
  128. style="width: 100%"
  129. >
  130. <el-option
  131. v-for="item in dict.type[column.referName]"
  132. :key="item.value"
  133. :label="item.label"
  134. :value="item.value"
  135. >
  136. </el-option>
  137. </el-select>
  138. <file-upload
  139. v-if="column.inputType === 'Upload'"
  140. v-model="params[column.key]"
  141. :file-type="column.fileType"
  142. ></file-upload>
  143. </el-form-item>
  144. </el-col>
  145. <el-divider></el-divider>
  146. <el-col :span="24">
  147. <el-form-item label-width="0">
  148. <el-tabs v-model="tabName">
  149. <el-tab-pane
  150. v-for="(column, index) in tabColumns"
  151. :key="index"
  152. :label="column.title"
  153. :name="column.key"
  154. lazy
  155. >
  156. <el-table :size="size" :data="params[column.key]">
  157. <el-table-column label="序号">
  158. <template slot-scope="scope">
  159. {{ scope.$index + 1 }}
  160. </template>
  161. </el-table-column>
  162. <el-table-column
  163. v-for="(cColumn, cIndex) in column.tableColumns"
  164. :key="cIndex"
  165. :prop="cColumn.key"
  166. :label="cColumn.title"
  167. :width="cColumn.width || 200"
  168. show-overflow-tooltip
  169. >
  170. <template slot-scope="scope">
  171. <el-input
  172. v-if="cColumn.inputType === 'Input'"
  173. v-model="scope.row[cColumn.key]"
  174. :size="size"
  175. :disabled="cColumn.disabled"
  176. :clearable="cColumn.clearable"
  177. :placeholder="cColumn.placeholder"
  178. style="width: 100%"
  179. ></el-input>
  180. <dr-computed-input
  181. v-else-if="cColumn.inputType === 'ComputedInput'"
  182. v-model="scope.row[cColumn.key]"
  183. :source="scope.row"
  184. :computed="cColumn.computed"
  185. :placeholder="cColumn.placeholder"
  186. style="width: 100%"
  187. ></dr-computed-input>
  188. <dr-popover-select
  189. v-else-if="cColumn.inputType === 'PopoverSelect'"
  190. v-model="scope.row[cColumn.key]"
  191. :size="size"
  192. :title="cColumn.title"
  193. :source.sync="scope.row"
  194. :type="cColumn.referName"
  195. :disabled="cColumn.disabled"
  196. :readonly="cColumn.readonly"
  197. :clearable="cColumn.clearable"
  198. :placeholder="cColumn.placeholder"
  199. :data-mapping="cColumn.dataMapping"
  200. @change="fetchRefer"
  201. >
  202. </dr-popover-select>
  203. <el-input-number
  204. v-else-if="cColumn.inputType === 'InputNumber'"
  205. v-model="scope.row[cColumn.key]"
  206. :size="size"
  207. :disabled="cColumn.disabled"
  208. :clearable="cColumn.clearable"
  209. :placeholder="cColumn.placeholder"
  210. :controls-position="cColumn.controlsPosition"
  211. style="width: 100%"
  212. ></el-input-number>
  213. <el-select
  214. v-else-if="cColumn.inputType === 'Select'"
  215. v-model="scope.row[cColumn.key]"
  216. :disabled="cColumn.disabled"
  217. :clearable="cColumn.clearable"
  218. :placeholder="cColumn.placeholder"
  219. style="width: 100%"
  220. >
  221. <el-option
  222. v-for="item in dict.type[cColumn.referName]"
  223. :key="item.value"
  224. :label="item.label"
  225. :value="item.value"
  226. >
  227. </el-option>
  228. </el-select>
  229. <el-date-picker
  230. v-else-if="cColumn.inputType === 'DatePicker'"
  231. v-model="scope.row[cColumn.key]"
  232. :type="cColumn.type"
  233. :disabled="cColumn.disabled"
  234. :clearable="cColumn.clearable"
  235. :placeholder="cColumn.placeholder"
  236. :value-format="cColumn.valueFormat"
  237. :picker-options="cColumn.pickerOptions"
  238. style="width: 100%"
  239. >
  240. </el-date-picker>
  241. <span v-else> {{ scope.row[cColumn.key] }}</span>
  242. </template>
  243. </el-table-column>
  244. <el-table-column fixed="right" label="操作" width="100">
  245. <template slot="header" slot-scope="scope">
  246. <el-button
  247. circle
  248. icon="el-icon-plus"
  249. :size="size"
  250. @click="useRowAdd(tabName)"
  251. >
  252. </el-button>
  253. </template>
  254. <template slot-scope="scope">
  255. <el-button
  256. circle
  257. icon="el-icon-minus"
  258. :size="size"
  259. @click.native.prevent="useRowRemove(tabName, scope)"
  260. >
  261. </el-button>
  262. </template>
  263. </el-table-column>
  264. </el-table>
  265. </el-tab-pane>
  266. </el-tabs>
  267. </el-form-item>
  268. </el-col>
  269. </el-row>
  270. </el-form>
  271. </el-drawer>
  272. </template>