index.vue 9.9 KB

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