index.vue 10 KB

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