drp-ui/src/views/purchase/priceDeclaration/add-price-declaration.vue

<!-- 价格申报单-新增 -->
<template>
  <el-drawer title="我是标题" direction="btt" size="100%" :with-header="false" :visible.sync="visible"
    :before-close="handleClose">
    <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="setVisible(false)">取消</el-button>
          <el-button size="mini" type="info" @click="setVisible(false)">保存并新增</el-button>
          <el-button size="mini" type="danger" @click="setVisible(false)">保存</el-button>
        </div>
      </div>
      <el-row>
        <el-form size="mini" label-position="right" label-width="150px" :model="params">
          <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 8">
            <el-form-item :prop="column.key" :label="column.title" :required="column.required">

              <el-input v-if="column.type === 'Input'" v-model="params[column.key]" :placeholder="column.placeholder"
                :clearable="column.clearable" style="width: 90%"></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" style="width: 90%"></el-input-number>

              <el-select v-if="column.type === 'Select'" v-model="params[column.key]" :placeholder="column.placeholder"
                :clearable="column.clearable" style="width: 90%">
                <el-option v-for="item in options" :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" style="width: 90%">
                <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" :picker-options="column.pickerOptions"
                style="width: 90%">
              </el-date-picker>

              <el-upload v-if="column.type === 'Upload'" :file-list="params[column.key]" 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',
      }" 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">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-drawer>
</template>

<script>
export default {
  name: 'addPriceDeclaration',
  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };
    const columns = [
      { key: "id", title: "id", type: "TagSelect", require: true },
      { key: "status", title: "单据状态" },
      { key: "priceName", title: "价格名称" },
      { key: "supplier", title: "供应商" },
      { key: "supplierName", title: "供应商名称" },
      { key: "puOrg", title: "采购组织" },
      { key: "puOrgName", title: "采购组织名称" },
      { key: "currency", title: "币种" },
      { key: "currencyName", title: "币种名称" },
      { key: "explain", title: "价格合理性说明" },
      { key: "buyer", title: "采购员" },
      { key: "buyerName", title: "采购员名称" },
      { key: "puDept", title: "采购部门" },
      { key: "puDeptName", title: "采购部门名称" },
      { key: "sourceType", title: "来源单据类型" },
      { key: "source", title: "来源单据号" },
      { key: "isEffective", title: "是否已推价格" },
      { key: "effectiveDate", title: "生效日期" },
      { key: "file", title: "附件" },
      { key: "tenantId", title: "租户号" },
      { key: "revision", title: "乐观锁" },
      { key: "createByName", title: "创建人名称" },
      { key: "updateByName", title: "更新人" },
      { key: "delFlag", title: "删除标记" }
    ];
    const initColumns = () =>
      columns.map((column) => {
        const clearable = column.clearable || true;
        if (column.type === "InputNumber") {
          return {
            ...column,
            clearable,
            config: { controlsPosition: "right" },
          };
        }
        if (column.type === "DatePicker") {
          return {
            ...column,
            clearable,
            config: { type: "date" },
          };
        }
        return {
          ...column,
          clearable,
        };
      });
    const initParams = () => arr2Obj(initColumns(), "key", "value");
    // 标签页列
    const tabColumns = [
      {
        key: 'materialBasic',
        title: '物料信息表',
        tableColumns: [],
      },
      {
        key: 'enforcementScope',
        title: '执行范围组织',
        tableColumns: [],
      },
    ]
    const initTabColumns = () => tabColumns;
    return {
      visible: false,
      // 主数据表头
      columns: initColumns(),
      // 表单
      params: initParams(),
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      // 标签页表格列
      tabColumns: initTabColumns(),
      // 标签页激活
      tabName: "materialBasic",
      // 标签页对应数据
      tabTableDatas: {
        materialBasic: [],
        enforcementScope: [],
      },
    }
  },
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
    handleClose() { },
    handleClick() { },

  },
  created() {
    console.log(this.params, this.columns);
  },
}
</script>