tire-platform-ui/src/views/basicData/productInformation/detailsPageEdit.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </el-button>
      </div>
      <el-button
          class="el-button--small-yh add-customer-btn"
          type="primary"
          :disabled="disabled"
          @click="editProductInfo"
          size="small"
      >{{ form.id ? '确认修改' : '确认新增' }}
      </el-button>
    </div>
    <div style="margin-top: 60px">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container style="margin-bottom: 10px">
        <avue-form ref="form" v-model="form" :option="option">
          <template slot="goodsTypeId" slot-scope="scope">
            <avue-input-tree
                v-model="form.goodsTypeId"
                :props="{ label: 'title', value: 'id' }"
                multiple
                placeholder=" "
                type="tree"
                :dic="dicData"/>
          </template>
          <template slot="corpId" slot-scope="scope">
            <selectComponent v-model="form.corpId"
                             :configuration="configuration" style="width: 100%"/>
          </template>
          <template slot="a" slot-scope="scope">
            <el-input
              v-input-limit="2"
              v-model="form.a"
              clearable
              placeholder="请输入 箱立方"
            ></el-input>
          </template>
        </avue-form>
      </basic-container>
    </div>
  </div>
</template>
<script>
import {getDetail, updateDetail, getDeptTree, priceDelete} from "@/api/basicData/commodityType";

export default {
  name: "detailsPage",
  data() {
    return {
      configuration: {
        multipleChoices: false,
        multiple: false,
        collapseTags: false,
        placeholder: '请点击右边按钮选择',
        dicData: []
      },
      form: {},
      disabled: false,
      userDialog: false,//供应商导入窗口
      dicData: [],
      detailsSelect: {},
      option: {
        menuBtn: false,
        labelWidth: 100,
        column: [
          {
            label: "产品编码",
            prop: "code",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "产品名称",
            prop: "cname",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
            slot: true
          },
          {
            label: "产品分类",
            prop: "goodsTypeId",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "花纹",
            prop: "brandItem",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "品牌",
            prop: "brand",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "状态",
            prop: "status",
            span: 8,
            type: 'select',
            dicData: [{
              label: '正常',
              value: 0
            }, {
              label: '停用',
              value: 1
            }],
          },
          {
            label: "规格",
            prop: "typeno", //specs
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "规格1",
            prop: "specsOne",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "规格2",
            prop: "specsTwo",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "级别",
            prop: "level",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "产地",
            prop: "placeProduction",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "三包",
            prop: "threeGuarantees",
            span: 8,
          },
          {
            label: "供应商",
            prop: "corpId",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "箱立方",
            prop: "a",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            minRows: 2,
            span: 24
          }
        ]
      },
    }
  },
  //初始化查询
  created() {
    getDeptTree().then(res => {
      this.dicData = res.data.data;
    });
    if (this.$route.query.id) {
      getDetail(JSON.parse(this.$route.query.id)).then(res => {
        this.form = res.data.data
      })
    } else {
      this.$set(this.form, "goodsTypeId", this.$route.query.treeDeptId)
    }
  },
  methods: {
    addSftRow() {
      this.sftData.push({
        $cellEdit: true,
        cname: null,
        texture: null,
        colour: null,
        describe: null,
        remarks: null
      });
    },
    rowContactCell(row, index) {
      this.$refs.crudContact.rowCell(row, index)
    },
    rowPurchaseCell(row, index) {
      this.$refs.crudPurchase.rowCell(row, index)
    },
    //修改提交触发
    editProductInfo() {
      this.$refs["form"].validate((valid) => {
        //校验明细列表
        if (valid) {
          const params = {
            ...this.form,
            type: 0,
          }
          updateDetail(params).then(res => {
            if (res.data.success) {
              this.$message.success("操作成功！")
            }
          })
        } else {
          return false;
        }
      });
    },
    //返回列表
    backToList() {
      this.$router.$avueRouter.closeTag();
      this.$router.push({
        path: '/basicData/productInformation/index',
        query: {}
      });
    }
  }
}
</script>

<style lang="scss" scoped>

.back-icon {
  line-height: 64px;
  font-size: 20px;
  margin-right: 8px;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.el-dialogDeep {
  ::v-deep .el-dialog {
    margin: 1vh auto 0 !important;
    padding-bottom: 10px !important;

    .el-dialog__body, .el-dialog__footer {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }
  }
}
</style>