index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. <script>
  2. import { Columns, TabColumns } from "../column";
  3. import {
  4. EDIT,
  5. ITEM,
  6. TABLELIST,
  7. TABLEROMOVE,
  8. } from "@/api/business/purchase/contract";
  9. import { initDicts, initRules, initParams } from "@/utils/init";
  10. export default {
  11. name: "EditDialog",
  12. dicts: Array.from(
  13. new Set([
  14. ...initDicts(Columns),
  15. ...initDicts(TabColumns.map((item) => item.tableColumns))
  16. .flat()
  17. .filter((cItem) => cItem.inputType === "Select"),
  18. ])
  19. ),
  20. data() {
  21. return {
  22. size: "mini",
  23. visible: false,
  24. loading: false,
  25. columns: Columns,
  26. rules: initRules(Columns),
  27. params: {
  28. ...initParams(Columns),
  29. contractItemList: [],
  30. contractClauseList: [],
  31. contractExpenseList: [],
  32. contractApplyOrgList: [],
  33. contractAgreementList: [],
  34. },
  35. tabColumns: TabColumns,
  36. tabName: "contractItemList",
  37. };
  38. },
  39. computed: {},
  40. watch: {
  41. "params.contractType": function (newProp) {
  42. this.tabColumns = TabColumns.filter((element) =>
  43. newProp === "1" ? element.key !== "contractItemList" : element
  44. );
  45. this.tabName = this.tabColumns[0].key;
  46. },
  47. },
  48. methods: {
  49. //
  50. open(prop) {
  51. this.visible = true;
  52. this.fetchItem(prop);
  53. },
  54. //
  55. hide() {
  56. this.visible = false;
  57. this.params = initParams(Columns);
  58. this.tabName = this.tabColumns[0].key;
  59. },
  60. //
  61. async fetchItem(prop) {
  62. try {
  63. this.loading = true;
  64. const { code, msg, data } = await ITEM(prop);
  65. if (code === 200) {
  66. this.params = data;
  67. this.$notify.success({ title: msg });
  68. this.tabName = this.tabColumns[0].key;
  69. this.fetchTable(this.params.code, this.tabName);
  70. } else {
  71. this.$notify.warning({ title: msg });
  72. }
  73. } catch (err) {
  74. //
  75. } finally {
  76. this.loading = false;
  77. }
  78. },
  79. //
  80. async fetchTable(prop, name) {
  81. try {
  82. this.loading = true;
  83. const { code, msg, rows } = await TABLELIST({ contractId: prop }, name);
  84. if (code === 200) {
  85. this.params[name] = rows;
  86. this.$notify.success({ title: msg });
  87. } else {
  88. this.$notify.warning({ title: msg });
  89. }
  90. } catch (err) {
  91. //
  92. } finally {
  93. this.loading = false;
  94. }
  95. },
  96. //
  97. rowAdd(prop) {
  98. const tab = this.tabColumns.find((element) => element.key === prop);
  99. this.params[prop].push(initParams(tab.tableColumns));
  100. },
  101. //
  102. async rowDelete(prop, { row: { id }, $index }) {
  103. try {
  104. this.loading = true;
  105. const { code, msg } = await TABLEROMOVE(id, prop);
  106. if (code === 200) {
  107. this.params[prop].splice($index, 1);
  108. this.$notify.success({ title: msg });
  109. } else {
  110. this.$notify.warning({ title: msg });
  111. }
  112. } catch (err) {
  113. //
  114. } finally {
  115. this.loading = false;
  116. }
  117. },
  118. //
  119. submit(prop) {
  120. this.$refs[prop].validate(async (valid) => {
  121. if (valid) {
  122. try {
  123. const createById = this.params.buyer;
  124. const createByName = this.params.buyerName;
  125. const updateById = this.$store.state.user.id;
  126. const updateByName = this.$store.state.user.name;
  127. const { code, msg } = await EDIT({
  128. createById,
  129. createByName,
  130. updateById,
  131. updateByName,
  132. ...this.params,
  133. });
  134. if (code === 200) {
  135. this.hide();
  136. this.$emit("success");
  137. this.$notify.success({ title: msg });
  138. } else {
  139. this.$notify.warning({ title: msg });
  140. }
  141. } catch (err) {
  142. //
  143. } finally {
  144. //
  145. }
  146. } else {
  147. return false;
  148. }
  149. });
  150. },
  151. },
  152. created() {},
  153. mounted() {},
  154. destroyed() {},
  155. };
  156. </script>
  157. <template>
  158. <el-dialog :visible.sync="visible" title="编辑" fullscreen @close="hide">
  159. <el-form
  160. ref="ruleForm"
  161. v-loading="loading"
  162. :size="size"
  163. :rules="rules"
  164. :model="params"
  165. label-width="auto"
  166. label-position="right"
  167. >
  168. <el-row :gutter="20" style="display: flex; flex-wrap: wrap">
  169. <el-col
  170. v-for="(column, index) in columns"
  171. :key="index"
  172. :span="column.span || 6"
  173. >
  174. <el-form-item :prop="column.key" :label="column.title">
  175. <el-input
  176. v-if="column.inputType === 'Input'"
  177. v-model="params[column.key]"
  178. :disabled="column.disabled"
  179. :clearable="column.clearable"
  180. :placeholder="column.placeholder"
  181. style="width: 100%"
  182. ></el-input>
  183. <dr-popover-select
  184. v-if="column.inputType === 'PopoverSelect'"
  185. v-model="params[column.key]"
  186. :source.sync="params"
  187. :title="column.title"
  188. :type="column.referName"
  189. :disabled="column.disabled"
  190. :readonly="column.readonly"
  191. :clearable="column.clearable"
  192. :placeholder="column.placeholder"
  193. :data-mapping="column.dataMapping"
  194. >
  195. </dr-popover-select>
  196. <el-input
  197. v-if="column.inputType === 'Textarea'"
  198. v-model="params[column.key]"
  199. type="textarea"
  200. :disabled="column.disabled"
  201. :clearable="column.clearable"
  202. :placeholder="column.placeholder"
  203. style="width: 100%"
  204. ></el-input>
  205. <el-input-number
  206. v-if="column.inputType === 'InputNumber'"
  207. v-model="params[column.key]"
  208. :disabled="column.disabled"
  209. :clearable="column.clearable"
  210. :placeholder="column.placeholder"
  211. :controls-position="column.controlsPosition"
  212. style="width: 100%"
  213. ></el-input-number>
  214. <el-select
  215. v-if="column.inputType === 'Select'"
  216. v-model="params[column.key]"
  217. :disabled="column.disabled"
  218. :clearable="column.clearable"
  219. :placeholder="column.placeholder"
  220. style="width: 100%"
  221. >
  222. <el-option
  223. v-for="item in dict.type[column.referName]"
  224. :key="item.value"
  225. :label="item.label"
  226. :value="item.value"
  227. >
  228. </el-option>
  229. </el-select>
  230. <el-date-picker
  231. v-if="column.inputType === 'DatePicker'"
  232. v-model="params[column.key]"
  233. :type="column.type"
  234. :disabled="column.disabled"
  235. :clearable="column.clearable"
  236. :placeholder="column.placeholder"
  237. :picker-options="column.pickerOptions"
  238. style="width: 100%"
  239. >
  240. </el-date-picker>
  241. <file-upload
  242. v-if="column.inputType === 'Upload'"
  243. v-model="params[column.key]"
  244. :file-type="column.fileType"
  245. ></file-upload>
  246. </el-form-item>
  247. </el-col>
  248. </el-row>
  249. <el-form-item label-width="0">
  250. <el-tabs
  251. v-model="tabName"
  252. tab-position="left"
  253. style="width: 100%"
  254. @tab-click="fetchTable(params.code, tabName)"
  255. >
  256. <el-tab-pane
  257. v-for="(column, index) in tabColumns"
  258. :key="index"
  259. :label="column.title"
  260. :name="column.key"
  261. >
  262. <el-table :data="params[column.key]" style="width: 100%">
  263. <el-table-column label="序号">
  264. <template slot-scope="scope">
  265. {{ scope.$index + 1 }}
  266. </template>
  267. </el-table-column>
  268. <el-table-column
  269. v-for="(cColumn, cIndex) in column.tableColumns"
  270. :key="cIndex"
  271. :prop="cColumn.key"
  272. :label="cColumn.title"
  273. :width="cColumn.width"
  274. >
  275. <template slot-scope="scope">
  276. <el-input
  277. v-if="cColumn.inputType === 'Input'"
  278. v-model="scope.row[cColumn.key]"
  279. :size="size"
  280. :disabled="cColumn.disabled"
  281. :clearable="cColumn.clearable"
  282. :placeholder="cColumn.placeholder"
  283. style="width: 100%"
  284. ></el-input>
  285. <dr-computed-input
  286. v-if="cColumn.inputType === 'ComputedInput'"
  287. v-model="scope.row[cColumn.key]"
  288. :source="scope.row"
  289. :computed="cColumn.computed"
  290. :placeholder="cColumn.placeholder"
  291. style="width: 100%"
  292. ></dr-computed-input>
  293. <dr-popover-select
  294. v-else-if="cColumn.inputType === 'PopoverSelect'"
  295. v-model="scope.row[cColumn.key]"
  296. :size="size"
  297. :title="cColumn.title"
  298. :source.sync="scope.row"
  299. :type="cColumn.referName"
  300. :disabled="cColumn.disabled"
  301. :readonly="cColumn.readonly"
  302. :clearable="cColumn.clearable"
  303. :placeholder="cColumn.placeholder"
  304. :data-mapping="cColumn.dataMapping"
  305. >
  306. </dr-popover-select>
  307. <el-input-number
  308. v-else-if="cColumn.inputType === 'InputNumber'"
  309. v-model="scope.row[cColumn.key]"
  310. :size="size"
  311. :disabled="cColumn.disabled"
  312. :clearable="cColumn.clearable"
  313. :placeholder="cColumn.placeholder"
  314. :controls-position="cColumn.controlsPosition"
  315. style="width: 100%"
  316. ></el-input-number>
  317. <el-select
  318. v-else-if="cColumn.inputType === 'Select'"
  319. v-model="scope.row[cColumn.key]"
  320. :disabled="cColumn.disabled"
  321. :clearable="cColumn.clearable"
  322. :placeholder="cColumn.placeholder"
  323. style="width: 100%"
  324. >
  325. <el-option
  326. v-for="item in dict.type[cColumn.referName]"
  327. :key="item.value"
  328. :label="item.label"
  329. :value="item.value"
  330. >
  331. </el-option>
  332. </el-select>
  333. <span v-else> {{ scope.row[cColumn.key] }}</span>
  334. </template>
  335. </el-table-column>
  336. <el-table-column fixed="right" label="操作" width="75">
  337. <template slot="header" slot-scope="scope">
  338. <el-button
  339. circle
  340. icon="el-icon-plus"
  341. :size="size"
  342. @click="rowAdd(tabName)"
  343. >
  344. </el-button>
  345. </template>
  346. <template slot-scope="scope">
  347. <el-button
  348. circle
  349. icon="el-icon-minus"
  350. :size="size"
  351. @click.native.prevent="
  352. rowDelete(params[tabName], scope.$index)
  353. "
  354. >
  355. </el-button>
  356. </template>
  357. </el-table-column>
  358. </el-table>
  359. </el-tab-pane>
  360. </el-tabs>
  361. </el-form-item>
  362. <el-form-item label-width="0" style="text-align: right">
  363. <el-button :size="size" @click="hide">取 消</el-button>
  364. <el-button :size="size" @click="submit('ruleForm')"> 更 新 </el-button>
  365. </el-form-item>
  366. </el-form>
  367. </el-dialog>
  368. </template>