index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813
  1. <script>
  2. import orderApi from "@/api/business/purchase/purchase-order";
  3. import { initColumns, initDicts, initRules, initParams } from "@/utils/init/index.js";
  4. import { Columns, TabColumns } from "./column";
  5. const NewColumns = initColumns(Columns);
  6. const NewTabColumns = TabColumns.map((element) => ({
  7. ...element,
  8. tableColumns: initColumns(element.tableColumns),
  9. }));
  10. const SelectColumns = NewColumns.filter(
  11. (column) => column.inputType === "Select"
  12. );
  13. NewTabColumns.forEach((column) => {
  14. SelectColumns.push(
  15. ...column.tableColumns.filter((cColumn) => cColumn.inputType === "Select")
  16. );
  17. });
  18. export default {
  19. name: "AddPurchaseOrderDrawer",
  20. dicts: initDicts(SelectColumns),
  21. components: {
  22. FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
  23. popDialog: () => import("@/components/PopDialog/index.vue"),
  24. },
  25. data() {
  26. return {
  27. visible: false,
  28. loading:false,
  29. columns: NewColumns,
  30. rules: initRules(NewColumns),
  31. params: {
  32. ...initParams(NewColumns),
  33. puOrderItemList: [],
  34. puOrderExecuteList: [],
  35. },
  36. tabColumns: NewTabColumns,
  37. tabName: "puOrderItemList",
  38. isCopy:false,
  39. };
  40. },
  41. computed: {},
  42. watch: {
  43. "params.puOrderItemList": {
  44. handler(nVal, oVal) {
  45. this.visible &&
  46. this.handleSynchronousMaterial(
  47. "puOrderItemList",
  48. "puOrderExecuteList"
  49. );
  50. },
  51. deep: true,
  52. },
  53. "params.puOrderExecuteList": {
  54. handler(nVal, oVal) {
  55. this.visible &&
  56. this.handleSynchronousMaterial(
  57. "puOrderExecuteList",
  58. "puOrderItemList"
  59. );
  60. },
  61. deep: true,
  62. },
  63. },
  64. methods: {
  65. beforeOpen() {
  66. if(!this.isCopy){
  67. const { deptName, deptId, name, nickName, orgName, orgId } = this.$store.state.user;
  68. this.params.puOrg = orgId;
  69. this.params.puOrgName = orgName;
  70. this.params.buyer = name;
  71. this.params.buyerName = nickName;
  72. this.params.puDept = deptId;
  73. this.params.puDeptName = deptName;
  74. this.params.billDate = new Date().Format('yyyy-MM-dd');
  75. console.log(this.params,'this.params');
  76. this.addTableRow();
  77. }
  78. },
  79. setVisible(prop,iscopy) {
  80. this.visible = prop;
  81. this.isCopy = iscopy;
  82. if(!this.visible){
  83. this.$refs['orderAddForm'].clearValidate();
  84. }
  85. },
  86. // 复制赋值
  87. async setCopyParams(id) {
  88. try {
  89. this.loading = true;
  90. const { code, msg, data } = await orderApi.details(id);
  91. if (code === 200) {
  92. this.params = {
  93. ...data,
  94. id: "",
  95. code: "",
  96. isEnd:'N',
  97. status: "0",
  98. source: "3",
  99. isClose:'N',
  100. billDate: new Date().Format('yyyy-MM-dd'),
  101. closeTime:'',
  102. isInvoice:'N',
  103. isSendWms:'N',
  104. rebateMoney:'',
  105. invoiceMoney:'',
  106. paymentMoney:'',
  107. applyPaymentMoney:'',
  108. erpOrderCode:'',
  109. };
  110. for (const key in this.params) {
  111. // if (Array.isArray(this.params[key])) {
  112. if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
  113. this.params[key].forEach((v) => {
  114. v.id = "";
  115. v.demandCode = "";
  116. v['isInvoice'] && (v['isInvoice'] = 'N');
  117. v['isStorage'] && (v['isStorage'] = 'N');
  118. v['isArrival'] && (v['isArrival'] = 'N');
  119. v['isPayment'] && (v['isPayment'] = 'N');
  120. });
  121. }
  122. }
  123. // 清空 累计本币开票金额、
  124. // 累计付款金额、累计付款申请金额、累计开票主数量、最终关闭时间
  125. // 、最终关闭、已同步WMS 、订单抵扣余额金额、订单使用返利金额、 发票标识
  126. }
  127. } catch (err) {
  128. //
  129. } finally {
  130. this.loading = false;
  131. }
  132. },
  133. // 增行
  134. addTableRow(prop) {
  135. for (const key in this.params) {
  136. // if (Array.isArray(this.params[key])) {
  137. if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
  138. const arr = this.tabColumns.find(
  139. (element) => element.key === key
  140. ).tableColumns;
  141. let rowData = initParams(arr, "key", "value");
  142. "rowno" in rowData &&
  143. (rowData["rowno"] = this.params[key].length + 1);
  144. // 物料
  145. if("rowNo" in rowData){
  146. rowData["rowNo"] = this.params[key].length + 1;
  147. // 扣税类别
  148. rowData["taxDeductClassify"] = '1';
  149. // 价格类型
  150. rowData["priceType"] = 'order';
  151. // 币种
  152. rowData["currency"] = '1002Z0100000000001K1';
  153. rowData["currencyName"] = '人民币';
  154. }
  155. // 是否完成询价,新增明细行需默认明细为false
  156. rowData["whetherCompleteInquiry"] = false;
  157. this.params[key].push(rowData);
  158. }
  159. }
  160. // const arr = this.tabColumns.find(
  161. // (element) => element.key === this.tabName
  162. // ).tableColumns;
  163. // prop.push(initParams(arr, "key", "value"));
  164. },
  165. // 删行
  166. async delTableRow(prop, index) {
  167. for (const key in this.params) {
  168. // if (Array.isArray(this.params[key])) {
  169. if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
  170. this.params[key].splice(index, 1);
  171. }
  172. }
  173. await this.handleGetPrice();
  174. // prop.splice(index, 1);
  175. },
  176. // 同步子表物料
  177. handleSynchronousMaterial(tableOne, tableTwo) {
  178. let _this = this;
  179. // this.params[tableOne]-- -> this.params[tableTwo]
  180. this.params[tableOne] &&
  181. this.params[tableOne].forEach((item, index) => {
  182. for (const key in item) {
  183. if(!_this.params[tableTwo][index]){
  184. const arr = _this.tabColumns.find(
  185. (element) => element.key === tableTwo
  186. ).tableColumns;
  187. _this.params[tableTwo].push(initParams(arr, "key", "value"));
  188. }
  189. if (key in _this.params[tableTwo][index]) {
  190. _this.params[tableTwo][index].material = item.material;
  191. key !== 'id' && ( _this.params[tableTwo][index][key] = item[key]);
  192. }
  193. }
  194. });
  195. },
  196. // 取消
  197. handleCancel() {
  198. this.params = {
  199. ...initParams(this.columns),
  200. puOrderItemList: [],
  201. puOrderExecuteList: [],
  202. };
  203. this.setVisible(false);
  204. },
  205. // 判断保存条件
  206. judgeSaveCondition(cb){
  207. this.$refs['orderAddForm'].validate(async (valid) => {
  208. if (valid) {
  209. if(!this.params['puOrderItemList'].length || !this.params['puOrderExecuteList'].length){
  210. this.$notify.error({
  211. title: '错误',
  212. message: '请填写订单行!'
  213. });
  214. return false;
  215. }
  216. // puOrderItemList
  217. let isPrice = this.params.puOrderItemList.filter(item => !item.whetherCompleteInquiry);
  218. if(isPrice.length){
  219. this.$notify.error({
  220. title: '错误',
  221. message: '询价失败!'
  222. });
  223. return false
  224. }
  225. console.log(isPrice,'isPrice');
  226. cb();
  227. } else {
  228. this.$notify.error({
  229. title: '错误',
  230. message: '存在必填项未填写'
  231. });
  232. console.log('error submit!!');
  233. return false;
  234. }
  235. });
  236. },
  237. // 保存
  238. handleSava() {
  239. console.log(this.params,'this.params---------');
  240. this.judgeSaveCondition(async()=>{
  241. try {
  242. this.loading = true;
  243. const { code, msg } = await orderApi.create(this.params);
  244. if (code === 200) {
  245. this.handleCancel();
  246. }
  247. } catch (err) {
  248. //
  249. } finally {
  250. this.loading = false;
  251. }
  252. })
  253. },
  254. // 主表参照改变之后
  255. async handleReferChange(val, type, source){
  256. // 供应商选择
  257. if( type === 'SUPPLIER_PARAM' ){
  258. let page = { pageNum: 1 , pageSize: 10 };
  259. let relevanceRefer = [
  260. {
  261. // 供应商联系人
  262. key:'supplierContacts',
  263. params:{
  264. type:'SUPPLIERCONTACTS_PARAM',
  265. supplierId:val.id,
  266. }
  267. },
  268. {
  269. // 供应商业务员
  270. key:'supplierPersonal',
  271. params:{
  272. type:'PSNLICENSE_PARAM',
  273. supplierId:val.id,
  274. pkOrg: source.puOrg,
  275. }
  276. }
  277. ]
  278. await relevanceRefer.forEach(async (refer) =>{
  279. try {
  280. const { code, rows} = await orderApi.REFER(
  281. {
  282. ...refer.params,
  283. search: "",
  284. isPage: true,
  285. }, page );
  286. if (code === 200) {
  287. source[refer.key] = rows[0]? rows[0].id :'';
  288. source[`${refer.key}Name`] = rows[0] ? rows[0].name :'';
  289. }
  290. } catch (error) {}
  291. })
  292. // 明细不为空的情况下进行询价
  293. let detailList = this.params['puOrderItemList'].filter(item => (
  294. item.material && item.material != ''
  295. ))
  296. if(detailList.length){
  297. this.params['puOrderItemList'] = this.params['puOrderItemList'].map(item => {
  298. item['whetherCompleteInquiry'] = false
  299. return item;
  300. });
  301. await this.handleGetPrice();
  302. }
  303. }
  304. // 组织
  305. if(type === 'ORG_PARAM'){
  306. for (const key in this.params) {
  307. // if (Array.isArray(this.params[key])) {
  308. if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
  309. this.params[key] = [];
  310. }
  311. else if(key === 'sysFileRecordList'){
  312. this.params[key] = [];
  313. }
  314. else if (
  315. key != "puOrg" &&
  316. key != "puOrgName" &&
  317. key != "buyer" &&
  318. key != "buyerName" &&
  319. key != "puDept" &&
  320. key != "puDeptName" &&
  321. key != "status"
  322. ) {
  323. this.params[key] = "";
  324. } else {
  325. }
  326. }
  327. }
  328. },
  329. // 下拉框选择改变
  330. handleSelectChange(val,typeName){
  331. if(val === 'billType'){
  332. this.params['billTypeName'] = this.dict.type[typeName].find(item => item.value == this.params[val]).label;
  333. }
  334. },
  335. // 子表参照改变之后
  336. async handleTabReferChange(val, type, source) {
  337. // 触发物料参照询价
  338. if (type == "MATERIAL_PARAM" && source.qty && source.qty != "") {
  339. source['qty'] = 0;
  340. source['whetherCompleteInquiry'] = false;
  341. source['taxPrice'] = 0;
  342. source['money'] = 0;
  343. source['taxDeductMoneya'] = 0;
  344. source['price'] = 0;
  345. source['notaxMoney'] = 0;
  346. source['tax'] = 0;
  347. this.params['qty'] = 0;
  348. this.params['originalQty'] = 0;
  349. this.params['money'] = 0;
  350. this.params['originalMoney'] = 0;
  351. this.params['notaxMoney'] = 0;
  352. source.isDrug = val.materialMedcine.isDrug == '0' ? 'Y' : 'N';
  353. // await this.handleGetPrice();
  354. }
  355. },
  356. // 子表下拉框改变
  357. async handleTabSelectChange(type,row){
  358. if(type == 'priceType' && row.material && row.qty && row.qty != ""){
  359. row['whetherCompleteInquiry'] = false;
  360. await this.handleGetPrice();
  361. }
  362. },
  363. // 子表inputNumber
  364. handleInputChange(row, type) {
  365. // 物料数量变化----询价
  366. if (type == "qty" && row.material) {
  367. row['whetherCompleteInquiry'] = false;
  368. row.qty && this.handleGetPrice();
  369. }
  370. },
  371. // 子表多选框改变
  372. handleTabCheckbox(type,source){
  373. // 勾选赠品,价税合计更新为0,含税单价、无税单价更新为0
  374. if(type === 'isGift' && source.material && source.qty && source.qty != ""){
  375. source['whetherCompleteInquiry'] = false;
  376. this.handleGetPrice()
  377. }
  378. },
  379. // 询价 getPrice
  380. async handleGetPrice() {
  381. try {
  382. // action:insert(新增)、revise(修订)、update(编辑)
  383. let { code, data } = await orderApi.getPrice({ ...this.params,action: 'insert' });
  384. if (code == 200) {
  385. this.params = data;
  386. }
  387. } catch (error) {}
  388. },
  389. },
  390. created() {
  391. console.log("ADD CREATED", this.params);
  392. },
  393. mounted() {},
  394. destroyed() {},
  395. };
  396. </script>
  397. <template>
  398. <el-drawer
  399. direction="btt"
  400. size="100%"
  401. :with-header="false"
  402. :visible.sync="visible"
  403. @open="beforeOpen"
  404. @close="$emit('close')"
  405. v-loading="loading"
  406. >
  407. <el-form
  408. size="mini"
  409. label-position="right"
  410. ref="orderAddForm"
  411. label-width="140px"
  412. :model="params"
  413. :rules="rules"
  414. >
  415. <el-card
  416. :body-style="{
  417. padding: '20px',
  418. display: 'flex',
  419. 'flex-wrap': 'wrap',
  420. }"
  421. style="margin: 10px"
  422. >
  423. <div
  424. slot="header"
  425. style="
  426. display: flex;
  427. justify-content: space-between;
  428. align-items: center;
  429. "
  430. >
  431. <h3>新增</h3>
  432. <div style="text-align: right">
  433. <el-button
  434. size="mini"
  435. type="primary"
  436. @click="handleSava"
  437. >保存</el-button>
  438. <el-button size="mini" @click="handleCancel">取消</el-button>
  439. </div>
  440. </div>
  441. <el-row style="display: flex; flex-wrap: wrap">
  442. <el-col
  443. v-for="(column, index) in columns"
  444. :key="index"
  445. :span="column.span || 6"
  446. >
  447. <el-form-item
  448. :prop="column.key"
  449. :label="column.title"
  450. v-if="column.isShow"
  451. >
  452. <el-input
  453. v-if="column.inputType === 'Input'"
  454. v-model="params[column.key]"
  455. :placeholder="column.placeholder"
  456. :clearable="column.clearable"
  457. :disabled="column.disabled"
  458. style="width: 100%"
  459. >
  460. </el-input>
  461. <dr-popover-select
  462. v-if="column.inputType === 'PopoverSelect'"
  463. v-model="params[column.key]"
  464. :value-key="column.valueKey"
  465. :source.sync="params"
  466. :title="column.title"
  467. :type="column.referName"
  468. :disabled="column.disabled"
  469. :multiple="column.multiple"
  470. :placeholder="column.placeholder"
  471. :data-mapping="column.dataMapping"
  472. :query-params="column.queryParams"
  473. @change="handleReferChange"
  474. ></dr-popover-select>
  475. <el-input
  476. v-if="column.inputType === 'Textarea'"
  477. v-model="params[column.key]"
  478. type="textarea"
  479. :placeholder="column.placeholder"
  480. :clearable="column.clearable"
  481. :disabled="column.disabled"
  482. style="width: 100%"
  483. ></el-input>
  484. <el-input-number
  485. v-if="column.inputType === 'InputNumber'"
  486. :min="column.min || 0"
  487. v-model="params[column.key]"
  488. :precision="column.precision"
  489. :controls-position="column.controlsPosition"
  490. :placeholder="column.placeholder"
  491. :clearable="column.clearable"
  492. :disabled="column.disabled"
  493. style="width: 100%"
  494. >
  495. </el-input-number>
  496. <el-select
  497. v-if="column.inputType === 'Select'"
  498. v-model="params[column.key]"
  499. :disabled="column.disabled"
  500. :clearable="column.clearable"
  501. :placeholder="column.placeholder"
  502. style="width: 100%"
  503. @change="handleSelectChange(column.key,column.referName)"
  504. >
  505. <el-option
  506. v-for="item in dict.type[column.referName]"
  507. :key="item.value"
  508. :label="item.label"
  509. :value="item.value"
  510. ></el-option>
  511. </el-select>
  512. <el-select
  513. v-if="column.inputType === 'TagSelect'"
  514. v-model="params[column.key]"
  515. multiple
  516. clearable
  517. collapse-tags
  518. :placeholder="column.placeholder"
  519. :clearable="column.clearable"
  520. :disabled="column.disabled"
  521. style="width: 100%"
  522. >
  523. <template #prefix>
  524. <el-icon
  525. class="el-icon-view"
  526. style="cursor: pointer"
  527. @click.stop="$message.info(234)"
  528. >
  529. </el-icon>
  530. </template>
  531. <el-option
  532. v-for="item in options"
  533. :key="item.value"
  534. :label="item.label"
  535. :value="item.value"
  536. ></el-option>
  537. </el-select>
  538. <el-date-picker
  539. v-if="column.inputType === 'DatePicker'"
  540. v-model="params[column.key]"
  541. :type="column.type"
  542. :placeholder="column.placeholder"
  543. :clearable="column.clearable"
  544. :disabled="column.disabled"
  545. :picker-options="column.pickerOptions"
  546. style="width: 100%"
  547. ></el-date-picker>
  548. <el-checkbox
  549. v-if="column.inputType === 'Checkbox'"
  550. v-model="params[column.key]"
  551. :disabled="column.disabled"
  552. true-label="Y"
  553. false-label="N"
  554. ></el-checkbox>
  555. <file-upload-center
  556. v-if="column.inputType === 'Upload'"
  557. v-model="params[column.key]"
  558. :file-type="column.fileType"
  559. ></file-upload-center>
  560. </el-form-item>
  561. </el-col>
  562. </el-row>
  563. </el-card>
  564. <el-card
  565. :body-style="{
  566. padding: '20px',
  567. display: 'flex',
  568. 'flex-wrap': 'wrap',
  569. position: 'relative',
  570. }"
  571. style="margin: 10px"
  572. >
  573. <el-tabs v-model="tabName" style="width: 100%">
  574. <el-tab-pane
  575. v-for="(column, index) in tabColumns"
  576. :key="index"
  577. :label="column.title"
  578. :name="column.key"
  579. >
  580. <el-table
  581. :data="params[column.key]"
  582. style="width: 100%"
  583. :height="params[column.key].length ? 300 : 100"
  584. >
  585. <el-table-column
  586. v-for="(cColumn, cIndex) in column.tableColumns"
  587. :key="cIndex"
  588. :label="cColumn.title"
  589. :width="cColumn.width || 80"
  590. >
  591. <template slot-scope="scope">
  592. <el-form-item
  593. label-width="0"
  594. :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
  595. :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }"
  596. >
  597. <el-tag v-if="cColumn.key === 'index'" >
  598. {{ scope.$index + 1 }}
  599. </el-tag>
  600. <el-input
  601. v-if="cColumn.inputType === 'Input'"
  602. v-model="scope.row[cColumn.key]"
  603. :placeholder="cColumn.placeholder"
  604. :clearable="cColumn.clearable"
  605. :disabled="cColumn.disabled"
  606. size="mini"
  607. style="width: 100%"
  608. ></el-input>
  609. <!-- -->
  610. <dr-popover-select
  611. v-if="cColumn.inputType === 'PopoverSelect'"
  612. v-model="scope.row[cColumn.key]"
  613. :source.sync="scope.row"
  614. :title="cColumn.title"
  615. :value-key="cColumn.valueKey"
  616. :type="cColumn.referName"
  617. :disabled="cColumn.disabled"
  618. :multiple="cColumn.multiple"
  619. :placeholder="cColumn.placeholder"
  620. :data-mapping="cColumn.dataMapping"
  621. :query-params="cColumn.queryParams"
  622. @change="handleTabReferChange"
  623. size="mini"
  624. >
  625. </dr-popover-select>
  626. <el-input-number
  627. v-if="cColumn.inputType === 'InputNumber'"
  628. v-model="scope.row[cColumn.key]"
  629. :precision="cColumn.precision"
  630. :min="column.min || 0"
  631. :controls-position="cColumn.controlsPosition"
  632. :placeholder="cColumn.placeholder"
  633. @change="handleInputChange(scope.row, cColumn.key)"
  634. :clearable="cColumn.clearable"
  635. :disabled="cColumn.disabled"
  636. size="mini"
  637. style="width: 100%"
  638. ></el-input-number>
  639. <el-select
  640. v-if="cColumn.inputType === 'Select'"
  641. v-model="scope.row[cColumn.key]"
  642. size="mini"
  643. :disabled="cColumn.disabled"
  644. :clearable="cColumn.clearable"
  645. :placeholder="cColumn.placeholder"
  646. style="width: 100%"
  647. @change="handleTabSelectChange(cColumn.key,scope.row)"
  648. >
  649. <el-option
  650. v-for="item in dict.type[cColumn.referName]"
  651. :key="item.value"
  652. :label="item.label"
  653. :value="item.value"
  654. ></el-option>
  655. </el-select>
  656. <el-checkbox
  657. v-if="cColumn.inputType === 'Checkbox'"
  658. v-model="scope.row[cColumn.key]"
  659. :disabled="cColumn.disabled"
  660. true-label="Y"
  661. false-label="N"
  662. @change="handleTabCheckbox(cColumn.key,scope.row)"
  663. ></el-checkbox>
  664. </el-form-item>
  665. </template>
  666. </el-table-column>
  667. <el-table-column fixed="right" label="操作" width="80">
  668. <template slot-scope="scope">
  669. <el-button
  670. @click.native.prevent="
  671. delTableRow(params[tabName], scope.$index)
  672. "
  673. type="text"
  674. size="small"
  675. >
  676. 删行
  677. </el-button>
  678. </template>
  679. </el-table-column>
  680. </el-table>
  681. </el-tab-pane>
  682. </el-tabs>
  683. <el-row style="position: absolute; top: 20px; right: 20px">
  684. <el-button size="mini" @click="addTableRow(params[tabName])"
  685. >增行</el-button
  686. >
  687. </el-row>
  688. </el-card>
  689. </el-form>
  690. </el-drawer>
  691. </template>