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"
      >{{ 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>
        </avue-form>
      </basic-container>
      <containerTitle title="商品规格"></containerTitle>
      <basic-container style="margin-bottom: 10px">
        <avue-crud
            :data="sftData"
            :option="sftOption"
            @row-del="rowSftDel"
        >
          <template slot="menuLeft" slot-scope="{ row, index }">
            <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                @click.stop="addSftRow(row, index)"
            >新增明细
            </el-button>
          </template>
          <template slot="menu" slot-scope="{ row, index }">
            <el-button
                size="small"
                icon="el-icon-edit"
                type="text"
                @click.stop="rowSftEdit(row, index)"
            >
              {{ row.$cellEdit ? "保存" : "编辑" }}
            </el-button>
            <el-button
                size="small"
                icon="el-icon-edit"
                type="text"
                @click.stop="rowSftDel(row, index)">
              删除
            </el-button>
            <el-button
                size="small"
                icon="el-icon-close"
                type="text">
              下架
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
      <containerTitle title="商品图片"></containerTitle>
      <basic-container style="margin-bottom: 10px">
        <avue-crud
            ref="imgUpload"
            :option="imgUploadList"
            :data="imgUploadData"
            @row-save="imgUploadSave"
            @row-update="imgUploadUpdate"
            @row-del="imgUploadDel"
            :upload-before="uploadBefore"
        ></avue-crud>
      </basic-container>
      <containerTitle title="详情页编辑"></containerTitle>
      <basic-container style="margin-bottom: 10px">
        <avue-ueditor v-model="text" :options="options"></avue-ueditor>
      </basic-container>
    </div>
  </div>
</template>
<script>
import {getDetail, updateDetail, getDeptTree, priceDelete} from "@/api/basicData/commodityType";
import sftOption from "./configuration/specification.json";
import imgUploadList from "./configuration/imgUploadList.json";

export default {
  name: "detailsPage",
  data() {
    return {
      form: {},
      sftData: [],
      sftOption: sftOption,
      imgUploadList: imgUploadList,
      text: '<h1 class="ql-align-center" style="text-align: center;"><a href="https://avuejs.com/doc/plugins/ueditor-plugins" target="_blank" style="font-weight: bold; color: rgb(194, 79, 74);">欢迎使用Avue富文本编辑器</a></h1><p class="ql-align-center" style="text-align: center;"><span style="font-weight: bold; color: rgb(194, 79, 74);"><img src="https://avuejs.com/images/logo-bg.jpg" height="200" width="200"></span></p>',
      options: {
        //普通图片上传
        action: "https://avuejs.com/imgupload",
        customConfig: {}, //wangEditor编辑的配置
        props: {
          res: "data",
          url: "url"
        }
      },
      disabled: false,
      userDialog: false,//供应商导入窗口
      imgUploadData: [],
      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: "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: "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: {
    // 商品图片上传保存
    imgUploadSave(row, done, loading) {
      console.log(row);
      this.imgUploadData.push(row);
      done();
    },
    imgUploadUpdate(row, index, done, loading) {
      done();
    },
    imgUploadDel(row, index, donerowDel) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //商品判断是否需要调用删除接口
        if (row.id) {
          // corpsattn(row.id).then(res => {
          //   this.$message({
          //     type: "success",
          //     message: "操作成功!"
          //   });
          //   this.imgUploadData.splice(index, 1);
          // })
        } else {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.imgUploadData.splice(index, 1);
        }
      });
    },
    // 上传前
    uploadBefore(file, done, loading, column) {
      const is2M = file.size / 1024 / 1024 < 2;
      const isType =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/jpg";
      if (!isType) {
        this.$message.error("图片只能是JPG、JPEG、PNG格式");
        loading();
      }
      if (!is2M) {
        this.$message.error("图片大小不能超过2M");
        loading();
      }
      const img = new Image();
      const _URL = window.URL || window.webkitURL;
      let isSize = null;
      img.onload = () => {
        if (column.label == "图片") {
          isSize = img.width === img.height;
          if (!isSize) {
            this.$message.error("图片宽高限制比例为1:1");
          }
        } else {
          const width = 750;
          const height = 1000;
          isSize = img.width === width && img.height <= height;
          if (!isSize) {
            this.$message.error("商品详情轮播图宽为750，高不能超过1000");
          }
        }
        if (is2M && isType && isSize) {
          done();
        } else {
          loading();
        }
      };
      img.src = _URL.createObjectURL(file);
    },
    rowSftEdit(row) {
      if (row.$cellEdit == true) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    addSftRow() {
      this.sftData.push({
        $cellEdit: true,
        cname: null,
        texture: null,
        colour: null,
        describe: null,
        remarks: null
      });
    },
    rowSftDel(row, index) {
    },
    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>
.customer-head {
  position: fixed;
  top: 105px;
  width: 100%;
  margin-left: -10px;
  height: 62px;
  background: #ffffff;
  box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
  z-index: 999;
  /* display: flex;
  justify-content: left; */
}

.customer-back {
  cursor: pointer;
  line-height: 62px;
  font-size: 16px;
  color: #323233;
  font-weight: 400;
}

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

.add-customer-btn {
  position: fixed;
  right: 36px;
  top: 115px;
}

::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>