tree-select 树形下拉框

<template>
  <div class="app-container">
    <el-form
      ref="templateForm"
      :model="formData"
      :rules="rules"
      label-width="90px"
      class="edit-page-form"
    >
      <el-form-item label="模板id" prop="docTreeName" v-show="false">
        <el-input v-model="formData.id" v-show="true" />
      </el-form-item>
      <el-form-item label="模板名称" prop="docTreeName">
        <el-input
          v-model="formData.docTreeName"
          placeholder="请输入文书树模板名称"
        />
      </el-form-item>
      <el-form-item label="审计类型" prop="auditBizType">
        <treeselect
          noResultsText="暂无数据"
          v-model="formData.auditBizType"
          :options="auditBizTypeOptions"
          :show-count="true"
          placeholder="请选择审计业务类型 "
          clearable
          :style="{ width: '100%' }"
          @select="selectChange"
        >
          <label
            :style="{
              color: '#606266',
              'font-family':
                'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
              'font-weight': '400',
              'font-size': '14px',
            }"
            slot="option-label"
            slot-scope="{
              node,
              shouldShowCount,
              count,
              labelClassName,
              countClassName,
            }"
            :class="labelClassName"
          >
                             {{ node.label }}
          </label>
        </treeselect>
      </el-form-item>
      <el-form-item label="模板描述" prop="docTreeDesc">
        <el-input
          v-model="formData.docTreeDesc"
          type="textarea"
          placeholder="请输入模板描述"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submitTemplateForm">确 定</el-button>
      <el-button @click="templateCancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {
  addDocTemplate,
  updateDocTemplate,
} from "../../../api/operation/docTemplate";
import { listTreedict, loadTreeNode } from "../../../api/system/treedict";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "templateInfo",
  components: {
    Treeselect,
  },
  props: {
    templateForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      formData: {
        id: null,
        docTreeName: null,
        auditBizType: null,
        docTreeDesc: null,
      },
      auditBizTypeOptions: [],
      // 表单校验
      rules: {
        auditBizType: [
          {
            required: true,
            message: "审计类型不能为空",
            trigger: "input",
          },
        ],
        docTreeName: [
          {
            required: true,
            message: "模板名称不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    templateForm: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("newValue", newValue);
        console.log("oldValue", oldValue);
        console.log("this.formData", this.formData);
        this.formData = {
          id: newValue.id,
          docTreeName: newValue.docTreeName,
          auditBizType: newValue.auditBizType,
          docTreeDesc: newValue.docTreeDesc,
        };
      },
      immediate: true,
    },
  },

  created() {
    this.getListTreeDictselect();
  },

  methods: {
    initFormData() {
      this.$refs["templateForm"].resetFields();
    },
    // 不要用input事件 =>    值更改后发出。 因为点完编辑再点击新增 会导致校验的提示语不会消失
    // 用select即可解决 =>选择一个选项后发出。
    selectChange(val) {
      console.log("this.fromAddBtn", this.fromAddBtn);
      this.$nextTick(() => {
        this.$refs.templateForm.validateField("auditBizType");
      });
    },
    /** 文书模板提交按钮 */
    submitTemplateForm() {
      console.log("this.formData.auditBizType", this.formData.auditBizType);
      this.$refs["templateForm"].validate((valid) => {
        console.log("valid", valid);
        if (valid) {
          if (this.templateForm.id != null) {
            updateDocTemplate(this.templateForm).then((response) => {
              this.msgSuccess("模板修改成功");
              this.$emit("closeDialog");
              this.$refs["templateForm"].resetFields();
            });
          } else {
            addDocTemplate(this.templateForm).then((response) => {
              this.msgSuccess("模板新增成功");
              this.$emit("closeDialog");
              this.$refs["templateForm"].resetFields();
            });
          }
        }
      });
    },
    templateCancel() {
      this.$emit("closeDialog");
      this.$refs["templateForm"].resetFields();
      // this.$refs["templateForm"].clearValidate();
    },
    /** 查询审计业务类型下拉树结构 */
    getListTreeDictselect() {
      loadTreeNode("auditBizType").then((response) => {
        this.auditBizTypeOptions = response.data.filter((item) => {
          if (item.dictId != 1) {
            return true;
          }
        });
      });
    },
  },
};
</script>

<style scoped>
span {
  color: #333;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 16px;
  margin-top: 2px;
}
/deep/ .audit-notice .el-form-item .el-form-item__label {
  color: #333;
  text-align: left;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  font-weight: 500;
  font-size: 16px;
}
</style>