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

<script>
export default {
  name: "SeePurchaseContractDrawer",
  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };
    const columns = [
      { key: "puOrg", title: "采购组织", type: "TagSelect", require: true },
      { key: "code", title: "合同编码", type: "Input" },
      { key: "contractName", title: "合同名称", type: "Input", require: true },
      { key: "supplier", title: "供应商", type: "TagSelect", require: true },
      { key: "contractType", title: "合同类型", type: "Select", require: true },
      { key: "puDept", title: "采购部门", type: "TagSelect", require: true },
      { key: "buyer", title: "采购员", type: "TagSelect" },
      { key: "source", title: "合同来源", type: "Select" },
      {
        key: "signDate",
        title: "合同签订日期",
        type: "DatePicker",
        require: true,
      },
      {
        key: "effectiveDate",
        title: "合同生效日期",
        type: "DatePicker",
        require: true,
      },
      { key: "endDate", title: "合同终止日期", type: "DatePicker" },
      { key: "externalContract", title: "外部合同号", type: "Input" },
      { key: "refusalReasons", title: "拒绝理由", type: "Input" },
      { key: "enquiryCode", title: "询价单号", type: "Input" },
      { key: "externalFile", title: "对外附件", type: "Upload", span: 24 },
      { key: "puFile", title: "采购商盖章合同附件", type: "Upload", span: 24 },
      {
        key: "supplierFile",
        title: "供应商盖章合同附件",
        type: "Upload",
        span: 24,
      },
      { key: "projectName", title: "项目名称", type: "TagSelect" },
      { key: "projectCode", title: "项目编号", type: "Input" },
      { key: "area", title: "区域", type: "Input" },
      { key: "consigneePhone", title: "收货人联系方式", type: "Input" },
      { key: "paymentAgreement", title: "付款协议", type: "TagSelect" },
      { key: "currency", title: "币种", type: "TagSelect", require: true },
      { key: "taxPrice", title: "价税合计", type: "InputNumber" },
      { key: "guaranteePeriod", title: "质保期", type: "Input" },

      // { key: "lastPuMoney", title: "上年度采购额" },
      // { key: "buyerName", title: "采购员名称" },
      // { key: "supplierName", title: "供应商名称" },
      // { key: "puMoneyYear", title: "本年度采购额" },
      // { key: "puDeptName", title: "采购部门名称" },
      // { key: "supplierTier", title: "供应商层级" },
      // { key: "grossRateAverage", title: "平均毛利率" },
      // { key: "approveFlow", title: "审批流程" },
      // { key: "consumableClass", title: "耗材类别" },
      // { key: "brandGrossRate", title: "同类品牌及毛利率" },
      // { key: "contractFormat", title: "合同格式" },
      // { key: "productName", title: "产品类别&名称" },
      // { key: "invoiceTax", title: "发票税率" },
      // { key: "emergencyDegree", title: "紧急程度" },
      // { key: "project", title: "项目医院" },
      // { key: "deliveryType", title: "交货方式" },
      // { key: "contractPartyc", title: "合同丙方" },
      // { key: "contractPartycName", title: "合同丙方名称" },
      // { key: "guaranteePeriodEnd", title: "质保期限" },
      // { key: "freightMethods", title: "运费承担方式" },
      // { key: "isTarget", title: "是否有指标" },
      // { key: "contractTarget", title: "合同指标" },
      // { key: "exemptionPostageCondtion", title: "包邮条件" },
      // { key: "isRebate", title: "是否有返利" },
      // { key: "rebatePolicy", title: "返利政策" },
      // { key: "rollbackPolicy", title: "退换货政策" },
      // { key: "contractContent", title: "合同主要内容" },
      // { key: "currencyName", 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 = [
      {
        title: "物料基本信息",
        key: "first",
        tableColumns: [
          { title: "序号", key: "" },
          { title: "赠品", key: "" },
          { title: "物料编码", key: "" },
          { title: "物料名称", key: "" },
          { title: "规格", key: "" },
          { title: "生产厂家", key: "" },
          { title: "收货客户", key: "" },
          { title: "品牌", key: "" },
          { title: "采购数量", key: "" },
          { title: "采购单位", key: "" },
          { title: "计价数量", key: "" },
          { title: "税率%", key: "" },
          { title: "含税单价", key: "" },
          { title: "含税金额合计", key: "" },
          { title: "价格有效期（起）", key: "" },
          { title: "计划到货日期", key: "" },
          { title: "来源类型", key: "" },
          { title: "来源单号", key: "" },
          { title: "需求单号", key: "" },
          { title: "备注", key: "" },
        ],
      },
      {
        title: "合同条款",
        key: "second",
        tableColumns: [
          { title: "序号", key: "" },
          { title: "条款编码", key: "" },
          { title: "条款名称", key: "" },
          { title: "条款内容", key: "" },
          { title: "变量序号", key: "" },
          { title: "变量内容", key: "" },
          { title: "备注", key: "" },
        ],
      },
      {
        title: "合同费用",
        key: "third",
        tableColumns: [
          { title: "序号", key: "" },
          { title: "费用编码", key: "" },
          { title: "费用名称", key: "" },
          { title: "费用金额", key: "" },
          { title: "备注", key: "" },
        ],
      },
      {
        title: "付款协议信息",
        key: "fourth",
        tableColumns: [
          { title: "序号", key: "" },
          { title: "付款阶段", key: "" },
          { title: "是否预付款", key: "" },
          { title: "是否质保金", key: "" },
          { title: "结算方式", key: "" },
          { title: "付款起点", key: "" },
          { title: "付款金额", key: "" },
          { title: "付款比例%", key: "" },
          { title: "账期天数", key: "" },
          { title: "备注", key: "" },
        ],
      },
      {
        title: "合同执行组织范围",
        key: "fifth",
        tableColumns: [
          { title: "序号", key: "" },
          { title: "组织名称", key: "" },
          { title: "组织编码", key: "" },
        ],
      },
    ];
    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: "first",
      tabTableDatas: {
        first: [],
        second: [],
        third: [],
        fourth: [],
        fifth: [],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
  },
  created() {
    console.log(this.params, this.columns);
  },
  mounted() {},
  destroyed() {},
};
</script>
<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>