|
|
@@ -0,0 +1,401 @@
|
|
|
+<script>
|
|
|
+import { Columns, TabColumns } from "../add/column";
|
|
|
+import {
|
|
|
+ edit,
|
|
|
+ item,
|
|
|
+ itemTableList,
|
|
|
+} from "@/api/business/purchase/purchase-contract";
|
|
|
+import { initColumns, initDicts, initRules, initParams } from "@/utils/init";
|
|
|
+
|
|
|
+const NewColumns = initColumns(Columns);
|
|
|
+const NewTabColumns = TabColumns.map((element) => ({
|
|
|
+ ...element,
|
|
|
+ tableColumns: initColumns(element.tableColumns),
|
|
|
+}));
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "EditDrawer",
|
|
|
+ dicts: initDicts(NewColumns),
|
|
|
+ components: {
|
|
|
+ DrInputDialog: () => import("@/views/input-dialog/index.vue"),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ size: "mini",
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ columns: NewColumns,
|
|
|
+ rules: initRules(NewColumns),
|
|
|
+ params: {
|
|
|
+ ...initParams(NewColumns),
|
|
|
+ contractItemList: [],
|
|
|
+ contractClauseList: [],
|
|
|
+ contractExpenseList: [],
|
|
|
+ contractAgreementList: [],
|
|
|
+ contractApplyOrgList: [],
|
|
|
+ },
|
|
|
+
|
|
|
+ tabColumns: NewTabColumns,
|
|
|
+ tabName: "contractItemList",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ "params.contractType": function (newProp) {
|
|
|
+ this.tabColumns = NewTabColumns.filter((element) =>
|
|
|
+ newProp === "1" ? element.key !== "contractItemList" : element
|
|
|
+ );
|
|
|
+ this.tabName = this.tabColumns[0].key;
|
|
|
+ },
|
|
|
+ tabName: function (newProp) {
|
|
|
+ const { id } = this.params;
|
|
|
+ this.fetchTable(id, newProp);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setVisible(prop) {
|
|
|
+ this.visible = prop;
|
|
|
+ },
|
|
|
+ // 查询详细
|
|
|
+ async fetchItem(prop) {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ const { code, msg, data } = await item(prop);
|
|
|
+ if (code === 200) {
|
|
|
+ this.params = data;
|
|
|
+ this.$notify.success({ title: msg });
|
|
|
+ } else {
|
|
|
+ this.$notify.warning({ title: msg });
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ this.$notify.error({ title: "error", message: err });
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询详情关联TABLE
|
|
|
+ async fetchTable(prop, name) {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ const { code, msg, rows } = await itemTableList({ id: prop }, name);
|
|
|
+ if (code === 200) {
|
|
|
+ this.params[name] = rows;
|
|
|
+ this.$notify.success({ title: msg });
|
|
|
+ } else {
|
|
|
+ this.$notify.warning({ title: msg });
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ this.$notify.error({ title: "error", message: err });
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 新增行
|
|
|
+ addTableRow(prop) {
|
|
|
+ const arr = this.tabColumns.find(
|
|
|
+ (element) => element.key === this.tabName
|
|
|
+ ).tableColumns;
|
|
|
+ prop.push(initParams(arr, "key", "value"));
|
|
|
+ },
|
|
|
+ // 删除行
|
|
|
+ delTableRow(prop, index) {
|
|
|
+ prop.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleCancel() {
|
|
|
+ this.setVisible(false);
|
|
|
+ this.params = initParams(this.columns, "key", "value");
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ handleSava() {
|
|
|
+ this.setVisible(false);
|
|
|
+ },
|
|
|
+ // 保存并新增
|
|
|
+ async handleSubmit() {
|
|
|
+ try {
|
|
|
+ const createById = this.params.buyer;
|
|
|
+ const createByName = this.params.buyerName;
|
|
|
+ const updateById = this.$store.state.user.id;
|
|
|
+ const updateByName = this.$store.state.user.name;
|
|
|
+ const { code, msg } = await edit({
|
|
|
+ createById,
|
|
|
+ createByName,
|
|
|
+ updateById,
|
|
|
+ updateByName,
|
|
|
+ ...this.params,
|
|
|
+ });
|
|
|
+ if (code === 200) {
|
|
|
+ this.$notify.success({ title: msg });
|
|
|
+ this.setVisible(false);
|
|
|
+ } else {
|
|
|
+ this.$notify.warning({ title: msg });
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ this.$notify.error({ title: "error", message: err });
|
|
|
+ } finally {
|
|
|
+ // this.setVisible(false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log("ADD CREATED");
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ destroyed() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <el-drawer
|
|
|
+ direction="btt"
|
|
|
+ size="100%"
|
|
|
+ :with-header="false"
|
|
|
+ :visible.sync="visible"
|
|
|
+ @open="beforeOpen"
|
|
|
+ @close="$emit('close')"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ v-loading="loading"
|
|
|
+ :size="size"
|
|
|
+ label-position="right"
|
|
|
+ label-width="135px"
|
|
|
+ :model="params"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-card
|
|
|
+ :body-style="{
|
|
|
+ padding: '20px',
|
|
|
+ display: 'flex',
|
|
|
+ 'flex-wrap': 'wrap',
|
|
|
+ }"
|
|
|
+ style="margin: 10px"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="header"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <h3>编辑</h3>
|
|
|
+ <div style="text-align: right">
|
|
|
+ <el-button :size="size" @click="handleCancel">取 消</el-button>
|
|
|
+ <el-button :size="size" type="danger" @click="handleSava"
|
|
|
+ >更 新</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col
|
|
|
+ v-for="(column, index) in columns"
|
|
|
+ :key="index"
|
|
|
+ :span="column.span || 6"
|
|
|
+ >
|
|
|
+ <el-form-item :prop="column.key" :label="column.title">
|
|
|
+ <el-input
|
|
|
+ v-if="column.type === 'Input'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-input>
|
|
|
+ <dr-input-dialog
|
|
|
+ v-if="column.type === 'InputDialog'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ :readonly="column.readonly"
|
|
|
+
|
|
|
+ :title="column.title"
|
|
|
+ :type="column.config.componentName"
|
|
|
+ :data-mapping="column.config.dataMapping"
|
|
|
+ :source.sync="params"
|
|
|
+ >
|
|
|
+ </dr-input-dialog>
|
|
|
+ <el-input
|
|
|
+ v-if="column.type === 'Textarea'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ type="textarea"
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-input>
|
|
|
+ <el-input-number
|
|
|
+ v-if="column.type === 'InputNumber'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ :controls-position="column.config.controlsPosition"
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-input-number>
|
|
|
+ <el-select
|
|
|
+ v-if="column.type === 'Select'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in dict.type[column.config.optionsName]"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-if="column.type === 'TagSelect'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon
|
|
|
+ class="el-icon-view"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click.stop="$message.info(234)"
|
|
|
+ ></el-icon>
|
|
|
+ </template>
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-if="column.type === 'DatePicker'"
|
|
|
+ v-model="params[column.key]"
|
|
|
+ :type="column.config.type"
|
|
|
+ :placeholder="column.placeholder"
|
|
|
+ :clearable="column.clearable"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ :picker-options="column.pickerOptions"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-upload
|
|
|
+ v-if="column.type === 'Upload'"
|
|
|
+ :file-list="params[column.key]"
|
|
|
+ :disabled="column.disabled"
|
|
|
+ drag
|
|
|
+ action="https://sy.derom.com/document-center/fastdfs/upload"
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 将文件拖到此处，或<em>点击上传</em>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="el-upload__tip" slot="tip">
|
|
|
+ 只能上传jpg/png文件，且不超过500kb
|
|
|
+ </div> -->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <el-card
|
|
|
+ :body-style="{
|
|
|
+ padding: '20px',
|
|
|
+ display: 'flex',
|
|
|
+ 'flex-wrap': 'wrap',
|
|
|
+ position: 'relative',
|
|
|
+ }"
|
|
|
+ style="margin: 10px"
|
|
|
+ >
|
|
|
+ <el-tabs v-model="tabName" style="width: 100%">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(column, index) in tabColumns"
|
|
|
+ :key="index"
|
|
|
+ :label="column.title"
|
|
|
+ :name="column.key"
|
|
|
+ >
|
|
|
+ <el-table :data="params[column.key]" style="width: 100%">
|
|
|
+ <el-table-column label="序号">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(cColumn, cIndex) in column.tableColumns"
|
|
|
+ :key="cIndex"
|
|
|
+ :prop="cColumn.key"
|
|
|
+ :label="cColumn.title"
|
|
|
+ :width="cColumn.width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="!cColumn.type">
|
|
|
+ {{ scope.row[cColumn.key] }}</span
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-if="cColumn.type === 'Input'"
|
|
|
+ v-model="scope.row[cColumn.key]"
|
|
|
+ :placeholder="cColumn.placeholder"
|
|
|
+ :clearable="cColumn.clearable"
|
|
|
+ :disabled="cColumn.disabled"
|
|
|
+ :size="size"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-input>
|
|
|
+ <dr-input-dialog
|
|
|
+ v-if="cColumn.type === 'InputDialog'"
|
|
|
+ v-model="scope.row[cColumn.key]"
|
|
|
+ :placeholder="cColumn.placeholder"
|
|
|
+ :clearable="cColumn.clearable"
|
|
|
+ :disabled="cColumn.disabled"
|
|
|
+ :readonly="cColumn.readonly"
|
|
|
+
|
|
|
+ :title="cColumn.title"
|
|
|
+ :type="cColumn.config.componentName"
|
|
|
+ :data-mapping="cColumn.config.dataMapping"
|
|
|
+ :source.sync="scope.row"
|
|
|
+ :size="size"
|
|
|
+ >
|
|
|
+ </dr-input-dialog>
|
|
|
+ <el-input-number
|
|
|
+ v-if="cColumn.type === 'InputNumber'"
|
|
|
+ v-model="scope.row[cColumn.key]"
|
|
|
+ :controls-position="cColumn.config.controlsPosition"
|
|
|
+ :placeholder="cColumn.placeholder"
|
|
|
+ :clearable="cColumn.clearable"
|
|
|
+ :disabled="cColumn.disabled"
|
|
|
+ :size="size"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click.native.prevent="
|
|
|
+ delTableRow(params[tabName], scope.$index)
|
|
|
+ "
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ 删行
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-row style="position: absolute; top: 20px; right: 20px">
|
|
|
+ <el-button :size="size" @click="addTableRow(params[tabName])"
|
|
|
+ >增行</el-button
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-form>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
002201