Smart_platform_ui/src/components/property-dialog/main.vue

<template>
  <div>
    <el-dialog title="属性编辑" class="el-dialogDeep" :visible.sync="visible" top="10vh" width="60%" append-to-body
      @closed="closed" :close-on-click-modal="false" v-dialog-drag>
      <span>
        <!-- <div class="settingBut">
          <el-button size="mini" @click="saveSetting" v-if="labelShow" type="primary">保存</el-button>
          <el-button size="mini" @click="labelShow = false" v-if="labelShow">取消</el-button>
          <el-tooltip effect="dark" content="Label名设置" placement="bottom" v-if="!labelShow">
            <el-button icon="el-icon-setting" circle size="mini" @click="setting"></el-button>
          </el-tooltip>
        </div> -->
        <avue-form ref="form" v-model="form" :option="option">
          <!-- <template slot="remarksOneLabel" v-if="labelShow">
            <el-input v-model="labelForm.label1" placeholder="请输入内容"></el-input>
          </template>
          <template slot="customTwoLabel" v-if="labelShow">
            <el-input v-model="labelForm.label2" placeholder="请输入内容"></el-input>
          </template>
          <template slot="customThreeLabel" v-if="labelShow">
            <el-input v-model="labelForm.label3" placeholder="请输入内容"></el-input>
          </template>
          <template slot="customFourLabel" v-if="labelShow">
            <el-input v-model="labelForm.label4" placeholder="请输入内容"></el-input>
          </template>
          <template slot="customFiveLabel" v-if="labelShow">
            <el-input v-model="labelForm.label5" placeholder="请输入内容"></el-input>
          </template> -->
        </avue-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="importData">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "property-dialog",
  data() {
    return {
      form: {
        remarksOne: null,
        customTwo: null,
        customThree: null,
        customFour: null,
        customFive: null,
        customSix: null,
        customSeven: null,
        customEight: null,
        customNine: null,
        customTen: null,
      },
      visible: false,
      fromIndex: null,
      option: {
        menuBtn: false,
        labelWidth: 100,
        column: [
          {
            label: "螺纹",
            prop: "remarksOne",
            labelslot: true,
            span: 12,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=Thread",
            props: {
              label: "dictValue",
              value: "dictValue"
            }
          },
          {
            label: "介质",
            prop: "customTwo",
            span: 12,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=medium",
            props: {
              label: "dictValue",
              value: "dictValue"
            }
          },
          {
            label: "颜色",
            prop: "customThree",
            span: 12,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=property_color",
            props: {
              label: "dictValue",
              value: "dictValue"
            }
          },
          {
            label: "钢印",
            prop: "customFour",
            span: 12,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=stencil",
            props: {
              label: "dictValue",
              value: "dictValue"
            }
          },
          {
            label: "特别提示",
            prop: "customFive",
            span: 24
          }
        ]
      },
      labelShow: false,
      labelForm: {}
    };
  },
  props: {},
  async created() {
    this.option = await this.getColumnData(this.getColumnName(52), this.option);
  },
  methods: {
    init(row, index) {
      if (row.attributeList) {
        let attributeList = []
        let data = []
        let propName = ["remarksOne", "customTwo", "customThree", "customFour", "customFive", "customSix", "customSeven", "customEight", "customNine", "customTen"]
        attributeList = JSON.parse(row.attributeList)
        attributeList.forEach((e, index) => {
          data.push({
            label: e.attributeName,
            prop: propName[index],
            span: 12,
            type: "select",
            dicData: e.attributeData,
            props: {
              label: "dictValue",
              value: "dictValue"
            }
          })
        });
        this.option.column = data
      }
      this.form = {
        remarksOne: row.remarksOne,
        customTwo: row.customTwo,
        customThree: row.customThree,
        customFour: row.customFour,
        customFive: row.customFive,
        customSix: row.customSix,
        customSeven: row.customSeven,
        customEight: row.customEight,
        customNine: row.customNine,
        customTen: row.customTen,
      };
      this.fromIndex = index;
      this.visible = true;
    },
    closed() {
      this.form = this.$options.data().form;
      console.log(this.form)
      this.fromIndex = null;
    },
    importData() {
      const data = {
        remarksOne: this.form.remarksOne,
        customTwo: this.form.customTwo,
        customThree: this.form.customThree,
        customFour: this.form.customFour,
        customFive: this.form.customFive,
        customSix: this.form.customSix,
        customSeven: this.form.customSeven,
        customEight: this.form.customEight,
        customNine: this.form.customNine,
        customTen: this.form.customTen,
      };
      this.$emit("importProperty", data, this.fromIndex);
      this.visible = false;
    },
    // setting() {
    //   this.labelShow = true;
    //   this.labelForm = {
    //     label1: this.option.column[0].label,
    //     label2: this.option.column[1].label,
    //     label3: this.option.column[2].label,
    //     label4: this.option.column[3].label,
    //     label5: this.option.column[4].label
    //   };
    // },
    // saveSetting() {
    //   this.option.column[0].label = this.labelForm.label1;
    //   this.option.column[1].label = this.labelForm.label2;
    //   this.option.column[2].label = this.labelForm.label3;
    //   this.option.column[3].label = this.labelForm.label4;
    //   this.option.column[4].label = this.labelForm.label5;
    //   this.saveColumn();
    // },
    // async saveColumn() {
    //   const inSave = await this.saveColumnData(
    //     this.getColumnName(52),
    //     this.option
    //   );
    //   if (inSave) {
    //     this.$message.success("保存成功");
    //     this.labelShow = false;
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
.settingBut {
  display: flex;
  justify-content: flex-end;
}
</style>