index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <script>
  2. import { Columns, TabColumns } from "../add/column";
  3. import orderApi from "@/api/business/purchase/purchase-order";
  4. import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
  5. const NewColumns = initColumns(Columns);
  6. const NewTabColumns = TabColumns.map((element) => ({
  7. ...element,
  8. tableColumns: initColumns(element.tableColumns),
  9. }));
  10. //
  11. const SelectColumns = NewColumns.filter(column => column.type === 'Select')
  12. NewTabColumns.forEach(column => {
  13. SelectColumns.push(...column.tableColumns.filter(cColumn => cColumn.type === 'Select'))
  14. });
  15. export default {
  16. name: "EditPurchaseOrderDrawer",
  17. dicts: initDicts(SelectColumns),
  18. components: {
  19. DrInputDialog: () => import("@/components/input-dialog/index.vue"),
  20. },
  21. data() {
  22. return {
  23. size: "mini",
  24. visible: false,
  25. loading: false,
  26. columns: NewColumns,
  27. rules: initRules(NewColumns),
  28. params: {
  29. ...initParams(NewColumns),
  30. puOrderItemList: [],
  31. puOrderExecuteList: [],
  32. },
  33. tabColumns: NewTabColumns,
  34. tabName: "puOrderItemList",
  35. };
  36. },
  37. computed: {},
  38. watch: {
  39. "params.contractType": function (newProp) {
  40. this.tabColumns = NewTabColumns.filter((element) =>
  41. newProp === "1" ? element.key !== "puOrderItemList" : element
  42. );
  43. this.tabName = this.tabColumns[0].key;
  44. },
  45. tabName: function (newProp) {
  46. const { id } = this.params;
  47. // this.fetchTable(id, newProp);
  48. },
  49. },
  50. methods: {
  51. setVisible(prop) {
  52. this.visible = prop;
  53. },
  54. // 查询详细
  55. async fetchItem(prop) {
  56. try {
  57. this.loading = true;
  58. const { code, msg, data } = await orderApi.details(prop);
  59. if (code === 200) {
  60. this.params = { ...this.params, ...data };
  61. console.log(this.params, 'this.params----------');
  62. this.$notify.success({ title: msg });
  63. } else {
  64. this.$notify.warning({ title: msg });
  65. }
  66. } catch (err) {
  67. this.$notify.error({ title: "error", message: err });
  68. } finally {
  69. this.loading = false;
  70. }
  71. },
  72. // 查询详情关联TABLE
  73. // async fetchTable(prop, name) {
  74. // try {
  75. // this.loading = true;
  76. // const { code, msg, rows } = await itemTableList({ id: prop }, name);
  77. // if (code === 200) {
  78. // this.params[name] = rows;
  79. // this.$notify.success({ title: msg });
  80. // } else {
  81. // this.$notify.warning({ title: msg });
  82. // }
  83. // } catch (err) {
  84. // this.$notify.error({ title: "error", message: err });
  85. // } finally {
  86. // this.loading = false;
  87. // }
  88. // },
  89. // 新增行
  90. addTableRow(prop) {
  91. const arr = this.tabColumns.find(
  92. (element) => element.key === this.tabName
  93. ).tableColumns;
  94. prop.push(initParams(arr, "key", "value"));
  95. },
  96. // 删除行
  97. delTableRow(prop, index) {
  98. prop.splice(index, 1);
  99. },
  100. // 取消
  101. handleCancel() {
  102. this.setVisible(false);
  103. this.params = initParams(this.columns, "key", "value");
  104. },
  105. // 保存
  106. async handleSava() {
  107. try {
  108. this.loading = true;
  109. const { code, msg } = await (this.handleIsRevise(this.params.status) ?
  110. orderApi.revision(this.params)
  111. : orderApi.edit(this.params)
  112. )
  113. if (code === 200) {
  114. this.setVisible(false);
  115. this.$notify.success({ title: msg });
  116. } else {
  117. this.$notify.warning({ title: msg });
  118. }
  119. } catch (err) {
  120. this.$notify.error({ title: "error", message: err });
  121. } finally {
  122. this.loading = false;
  123. }
  124. },
  125. beforeOpen() {
  126. },
  127. // 判断修订还是编辑
  128. handleIsRevise(status) {
  129. return status == '2';
  130. },
  131. },
  132. created() {
  133. console.log("EDIT CREATED");
  134. console.log(this.params, 'this.params');
  135. },
  136. mounted() { },
  137. destroyed() { },
  138. };
  139. </script>
  140. <template>
  141. <el-drawer direction="btt" size="100%" :with-header="false" :visible.sync="visible" @open="beforeOpen"
  142. @close="$emit('close')">
  143. <el-form v-loading="loading" :size="size" label-position="right" label-width="135px" :model="params" :rules="rules">
  144. <el-card :body-style="{
  145. padding: '20px',
  146. display: 'flex',
  147. 'flex-wrap': 'wrap',
  148. }" style="margin: 10px">
  149. <div slot="header" style="
  150. display: flex;
  151. justify-content: space-between;
  152. align-items: center;
  153. ">
  154. <h3>{{ handleIsRevise(params.status) ? '修订' : '编辑' }}</h3>
  155. <div style="text-align: right">
  156. <el-button :size="size" @click="handleCancel">取 消</el-button>
  157. <el-button :size="size" type="danger" @click="handleSava">更 新</el-button>
  158. </div>
  159. </div>
  160. <el-row>
  161. <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 6">
  162. <el-form-item :prop="column.key" :label="column.title">
  163. <el-input v-if="column.type === 'Input'" v-model="params[column.key]" :placeholder="column.placeholder"
  164. :clearable="column.clearable" :disabled="column.disabled" style="width: 100%">
  165. </el-input>
  166. <dr-input-dialog v-if="column.type === 'InputDialog'" v-model="params[column.key]"
  167. :placeholder="column.placeholder" :clearable="column.clearable" :disabled="column.disabled"
  168. :readonly="column.readonly" :query-params="column.config.queryParams" :title="column.title"
  169. :type="column.config.componentName" :data-mapping="column.config.dataMapping" :source.sync="params">
  170. </dr-input-dialog>
  171. <el-input v-if="column.type === 'Textarea'" v-model="params[column.key]" type="textarea"
  172. :placeholder="column.placeholder" :clearable="column.clearable" :disabled="column.disabled"
  173. style="width: 100%">
  174. </el-input>
  175. <el-input-number v-if="column.type === 'InputNumber'" v-model="params[column.key]"
  176. :controls-position="column.config.controlsPosition" :placeholder="column.placeholder"
  177. :clearable="column.clearable" :disabled="column.disabled" style="width: 100%">
  178. </el-input-number>
  179. <el-select v-if="column.type === 'Select'" v-model="params[column.key]" :placeholder="column.placeholder"
  180. :clearable="column.clearable" :disabled="column.disabled" style="width: 100%">
  181. <el-option v-for="item in dict.type[column.config.optionsName]" :key="item.value" :label="item.label"
  182. :value="item.value">
  183. </el-option>
  184. </el-select>
  185. <el-select v-if="column.type === 'TagSelect'" v-model="params[column.key]" multiple clearable collapse-tags
  186. :placeholder="column.placeholder" :clearable="column.clearable" :disabled="column.disabled"
  187. style="width: 100%">
  188. <template #prefix>
  189. <el-icon class="el-icon-view" style="cursor: pointer" @click.stop="$message.info(234)"></el-icon>
  190. </template>
  191. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  192. </el-option>
  193. </el-select>
  194. <el-date-picker v-if="column.type === 'DatePicker'" v-model="params[column.key]" :type="column.config.type"
  195. :placeholder="column.placeholder" :clearable="column.clearable" :disabled="column.disabled"
  196. :picker-options="column.pickerOptions" style="width: 100%">
  197. </el-date-picker>
  198. <el-checkbox v-else-if="column.type === 'Checkbox'" v-model="params[column.key]" :disabled="column.disabled"
  199. true-label="Y" false-label="N">
  200. </el-checkbox>
  201. <el-upload v-if="column.type === 'Upload'" :file-list="params[column.key]" :disabled="column.disabled" drag
  202. action="https://sy.derom.com/document-center/fastdfs/upload" multiple>
  203. <i class="el-icon-upload"></i>
  204. <div class="el-upload__text">
  205. 将文件拖到此处,或<em>点击上传</em>
  206. </div>
  207. <!-- <div class="el-upload__tip" slot="tip">
  208. 只能上传jpg/png文件,且不超过500kb
  209. </div> -->
  210. </el-upload>
  211. </el-form-item>
  212. </el-col>
  213. </el-row>
  214. </el-card>
  215. <el-card :body-style="{
  216. padding: '20px',
  217. display: 'flex',
  218. 'flex-wrap': 'wrap',
  219. position: 'relative',
  220. }" style="margin: 10px">
  221. <el-tabs v-model="tabName" style="width: 100%">
  222. <el-tab-pane v-for="(column, index) in tabColumns" :key="index" :label="column.title" :name="column.key">
  223. <el-table :data="params[column.key]" style="width: 100%">
  224. <el-table-column label="序号">
  225. <template slot-scope="scope">
  226. {{ scope.$index + 1 }}
  227. </template>
  228. </el-table-column>
  229. <el-table-column v-for="(cColumn, cIndex) in column.tableColumns" :key="cIndex" :prop="cColumn.key"
  230. :label="cColumn.title" :width="cColumn.width">
  231. <template slot-scope="scope">
  232. <span v-if="!cColumn.type">
  233. {{ scope.row[cColumn.key] }}</span>
  234. <el-input v-if="cColumn.type === 'Input'" v-model="scope.row[cColumn.key]"
  235. :placeholder="cColumn.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
  236. :size="size" style="width: 100%">
  237. </el-input>
  238. <dr-input-dialog v-if="cColumn.type === 'InputDialog'" v-model="scope.row[cColumn.key]"
  239. :placeholder="cColumn.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
  240. :readonly="cColumn.readonly" :title="cColumn.title" :type="cColumn.config.componentName"
  241. :data-mapping="cColumn.config.dataMapping" :source.sync="scope.row" :size="size">
  242. </dr-input-dialog>
  243. <el-select v-if="cColumn.type === 'Select'" v-model="params[cColumn.key]"
  244. :placeholder="column.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
  245. style="width: 100%">
  246. <el-option v-for="item in dict.type[cColumn.config.optionsName]" :key="item.value" :label="item.label"
  247. :value="item.value">
  248. </el-option>
  249. </el-select>
  250. <el-checkbox v-else-if="cColumn.type === 'Checkbox'" v-model="params[cColumn.key]" true-label="Y"
  251. false-label="N">
  252. </el-checkbox>
  253. <el-input-number v-if="cColumn.type === 'InputNumber'" v-model="scope.row[cColumn.key]"
  254. :controls-position="cColumn.config.controlsPosition" :placeholder="cColumn.placeholder"
  255. :clearable="cColumn.clearable" :disabled="cColumn.disabled" :size="size" style="width: 100%">
  256. </el-input-number>
  257. </template>
  258. </el-table-column>
  259. <el-table-column fixed="right" label="操作" width="120">
  260. <template slot-scope="scope">
  261. <el-button @click.native.prevent="
  262. delTableRow(params[tabName], scope.$index)
  263. " type="text" size="small">
  264. 删行
  265. </el-button>
  266. </template>
  267. </el-table-column>
  268. </el-table>
  269. </el-tab-pane>
  270. </el-tabs>
  271. <el-row style="position: absolute; top: 20px; right: 20px">
  272. <el-button :size="size" @click="addTableRow(params[tabName])">增行</el-button>
  273. </el-row>
  274. </el-card>
  275. </el-form>
  276. </el-drawer>
  277. </template>