index.vue 12 KB

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