saas_entrepot_admin/src/views/Marketing/goods/fieldTemplate/temPlatePop.vue

<template>
  <div id="temPlatePop">
    <el-dialog
      :visible.sync="diaBox"
      width="900px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">字段模板</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="diaBox = false"
          />
        </div>
      </div>
      <el-row :gutter="10" style="margin-bottom: 14px">
        <el-col :span="8">商品信息：</el-col>
        <el-col
          :span="8"
          style="color: transparent !important; user-select: none"
          >2</el-col
        >
        <el-col :span="8">商品包装介绍：</el-col>
      </el-row>
      <div class="boxStyle">
        <div class="colStyle">
          <div v-for="(item, index) in arr1" :key="index">
            <el-checkbox
              style="margin-right: 6px"
              v-model="item.status"
              :disabled="item.disabled == 1"
              :true-label="1"
              :false-label="0"
              ><span
                style="color: transparent !important; user-select: none"
              ></span
            ></el-checkbox>
            <span>{{ item.fieldName }}</span>
            <el-checkbox
              style="float: right"
              v-model="item.require"
              :true-label="1"
              :disabled="item.disabledRequire === 1"
              :false-label="0"
              >必填</el-checkbox
            >
          </div>
        </div>
        <div class="colStyle">
          <div v-for="(item, index) in arr2" :key="index">
            <el-checkbox
              style="margin-right: 6px"
              v-model="item.status"
              :disabled="item.disabled == 1"
              :true-label="1"
              :false-label="0"
              ><span
                style="color: transparent !important; user-select: none"
              ></span
            ></el-checkbox>
            <span>{{ item.fieldName }}</span>
            <el-checkbox
              style="float: right"
              v-model="item.require"
              :true-label="1"
              :disabled="item.disabledRequire === 1"
              :false-label="0"
              >必填</el-checkbox
            >
          </div>
        </div>
        <div class="colStyle">
          <div v-for="(item, index) in arr3" :key="index">
            <el-checkbox
              style="margin-right: 6px"
              v-model="item.status"
              :disabled="item.disabled == 1"
              :true-label="1"
              :false-label="0"
              ><span
                style="color: transparent !important; user-select: none"
              ></span
            ></el-checkbox>
            <span>{{ item.fieldName }}</span>
            <el-checkbox
              style="float: right"
              v-model="item.require"
              :true-label="1"
              :false-label="0"
              :disabled="item.disabledRequire === 1"
              >必填</el-checkbox
            >
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="diaBox = false">取 消</el-button>
        <el-button type="primary" @click="submitEveryDayStyleNumData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diaBox: false,
      everyDaystyleNum: "",
      arr1: [],
      arr2: [],
      arr3: [],
      id: "",
    };
  },
  methods: {
    openBox(id) {
      this.id = id;
      this.arr1 = [];
      this.arr2 = [];
      this.arr3 = [];
      this.$api.obtainbusiness(id).then((res) => {
        let arr = JSON.parse(res.data.goodsFieldJson);
        for (let i = 0; i < arr.length; i++) {
          if (i <= 10) {
            this.arr1.push(arr[i]);
          } else if (i > 10 && i <= 21) {
            this.arr2.push(arr[i]);
          } else {
            this.arr3.push(arr[i]);
          }
        }
        this.diaBox = true;
      });
    },
    submitEveryDayStyleNumData() {
      let json = [...this.arr1, ...this.arr2, ...this.arr3];
      this.$api
        .editCourseBusiness({
          goodsFieldJson: JSON.stringify(json),
          id: this.id,
        })
        .then((res) => {
          this.$emit("backData", "");
          this.$message.success("修改成功");
          this.diaBox = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.boxStyle {
  display: flex;
  justify-content: space-between;
}
.colStyle {
  flex: 1;
  flex-shrink: 0;
  background-color: #eee;
  padding: 10px 20px;
  margin-right: 10px;
  & > :last-of-type {
    margin-right: 0px;
  }
  > div {
    margin-bottom: 6px;
    > span {
      user-select: none;
    }
  }
}
</style>