drp-ui/src/views/purchase/purchase-contract/add-purchase-contract.vue

<script>
import { add } from "@/api/business/purchase/purchase-contract";
import { arr2obj } from "@/utils/data-transform";
import {
  initDicts,
  initRules,
  initParams,
  initComponents,
} from "@/utils/init-something";
import { initColumns } from "./config/add";

export default {
  name: "AddPurchaseContractDrawer",
  components: initComponents(initColumns()),
  dicts: initDicts(initColumns()),
  data() {
    return {
      visible: true,
      columns: initColumns(),
      rules: initRules(initColumns()),
      params: initParams(initColumns()),
      tabColumns: initTabColumns(),
      tabName: "first",
      tabTableDatas: {
        first: [],
        second: [],
        third: [],
        fourth: [],
        fifth: [],
      },
      currentComponent: { name: "", title: "", value: "", row: {} },
    };
  },
  computed: {},
  watch: {},
  methods: {
    beforeOpen() {
      const { deptName, nickName, orgName } = this.$store.state.user;
      this.params.puOrg = orgName;
      this.params.buyer = nickName;
      this.params.puDept = deptName;
    },
    setVisible(prop) {
      this.visible = prop;
    },
    addTableRow() {},
    cancel() {
      this.setVisible(false);
      this.params = arr2obj(this.columns, "key", "value");
    },
    sava() {
      this.setVisible(false);
    },
    async submitSava() {
      console.log(this.params);
      return;
      try {
        const res = await add(this.params);
        console.log("res", res);
      } catch (err) {
        this.$notify.error({ title: "error", message: err });
      } finally {
        this.setVisible(false);
      }
    },
    //
    openAsyncInputDialog(prop, type) {
      try {
        const {
          key,
          title,
          config: { componentName },
        } = prop;
        this.currentComponent.row = prop;
        this.currentComponent.title = title;
        this.currentComponent.name = componentName;
        if (type === "change") {
          this.currentComponent.value = this.params[key];
        }
        if (type === "click") {
          this.currentComponent.value = "";
        }
        this.$nextTick(() => {
          const { setVisible } = this.$refs[componentName];
          setVisible(true);
        });
      } catch (err) {
        this.$notify.error({ title: "error", message: err });
      } finally {
      }
    },
    updateParams(prop) {
      const {
        config: { dataMapping },
      } = this.currentComponent.row;
      for (let key in dataMapping) {
        this.params[key] = prop[dataMapping[key]];
      }
    },
  },
  created() {
    // console.log("this,", initComponents(initColumns()));
  },
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-drawer
    direction="btt"
    size="100%"
    :with-header="false"
    :visible.sync="visible"
    @open="beforeOpen"
  >
    <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="mini" @click="cancel">取消</el-button>
          <el-button size="mini" type="danger" @click="sava">保存</el-button>
          <el-button size="mini" type="info" @click="submitSava">
            保存并新增
          </el-button>
        </div>
      </div>
      <component
        v-if="currentComponent.name"
        :is="currentComponent.name"
        :ref="currentComponent.name"
        :title="currentComponent.title"
        :value="currentComponent.value"
        @confirm="updateParams"
      ></component>
      <el-row>
        <el-form
          size="mini"
          label-position="right"
          label-width="135px"
          :model="params"
          :rules="rules"
        >
          <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>
              <el-input
                v-if="column.type === 'InputDialog'"
                v-model="params[column.key]"
                :placeholder="column.placeholder"
                :clearable="column.clearable"
                :disabled="column.disabled"
                style="width: 100%"
                @blur="openAsyncInputDialog(column, 'change')"
                @change="openAsyncInputDialog(column, 'change')"
              >
                <template #suffix>
                  <el-icon
                    class="el-icon-s-operation"
                    style="cursor: pointer"
                    @click.native.stop="openAsyncInputDialog(column, 'click')"
                  ></el-icon>
                </template>
              </el-input>
              <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-s-operation"
                    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://jsonplaceholder.typicode.com/posts/"
                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-form>
      </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" @tab-click="handleClick" style="width: 100%">
        <el-tab-pane
          v-for="(column, index) in tabColumns"
          :key="index"
          :label="column.title"
          :name="column.key"
        >
          <el-table :data="tabTableDatas[column.key]" style="width: 100%">
            <el-table-column
              v-for="(cColumn, cIndex) in column.tableColumns"
              :key="cIndex"
              :prop="cColumn.key"
              :label="cColumn.title"
              :width="cColumn.width"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-row style="position: absolute; top: 20px; right: 20px">
        <el-button size="mini" @click="addTableRow">增行</el-button>
      </el-row>
    </el-card>
  </el-drawer>
</template>