123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- <script>
- import { Columns, TabColumns } from "../add/column";
- import orderApi from "@/api/business/purchase/purchase-order";
- 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: "EditPurchaseOrderDrawer",
- dicts: initDicts(NewColumns),
- components: {
- DrInputDialog: () => import("@/components/input-dialog/index.vue"),
- },
- data() {
- return {
- size: "mini",
- visible: false,
- loading: false,
- columns: NewColumns,
- rules: initRules(NewColumns),
- params: {
- ...initParams(NewColumns),
- puOrderItemList: [],
- puOrderExecuteList: [],
- },
- tabColumns: NewTabColumns,
- tabName: "puOrderItemList",
- };
- },
- computed: {},
- watch: {
- "params.contractType": function (newProp) {
- this.tabColumns = NewTabColumns.filter((element) =>
- newProp === "1" ? element.key !== "puOrderItemList" : 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 orderApi.details(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");
- },
- // 保存
- async handleSava() {
- try {
- this.loading = true;
- const { code, msg } = await (this.handleIsRevise(this.params.status) ?
- orderApi.revision(this.params)
- : orderApi.edit(this.params)
- )
- if (code === 200) {
- this.setVisible(false);
- this.$notify.success({ title: msg });
- } else {
- this.$notify.warning({ title: msg });
- }
- } catch (err) {
- this.$notify.error({ title: "error", message: err });
- } finally {
- this.loading = false;
- }
- },
- beforeOpen() {
- },
- // 判断修订还是编辑
- handleIsRevise(status) {
- return status == '2';
- },
- },
- 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>{{ handleIsRevise(params.status) ? '修订' : '编辑' }}</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-checkbox v-else-if="column.type === 'Checkbox'" v-model="params[column.key]" :disabled="column.disabled"
- true-label="Y" false-label="N">
- </el-checkbox>
- <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-select v-if="cColumn.type === 'Select'" v-model="params[cColumn.key]"
- :placeholder="column.placeholder" :clearable="cColumn.clearable" :disabled="cColumn.disabled"
- style="width: 100%">
- <el-option v-for="item in dict.type[cColumn.config.optionsName]" :key="item.value" :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- <el-checkbox v-else-if="cColumn.type === 'Checkbox'" v-model="params[cColumn.key]" true-label="Y"
- false-label="N">
- </el-checkbox>
- <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>
|