index.vue 12 KB

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