element 级联懒加载

<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入账户名称"
                            v-model="searchInfo.keyName"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            placeholder="请输入角色"
                            v-model="searchInfo.dictKey"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="status">
                    <el-select
                            v-model="searchInfo.status"
                            placeholder="请选择抽佣状态"
                            clearable
                            size="small"
                    >
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="small"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button @click="openDialog('add')" size="small">新 增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column prop="username" label="账户名称" align="center">
            </el-table-column>
            <el-table-column prop="roleName" label="角色" align="center">
            </el-table-column>
            <el-table-column prop="areaName" label="区域" align="center">
            </el-table-column>
            <!-- <el-table-column prop="status" label="是否抽佣" align="center">
              <template slot-scope="scope">
                <span :class="scope.row.status == 1 ? 'green' : 'red'">{{
                  scope.row.status == 1 ? "是" : "否"
                }}</span>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="props" label="抽佣比例" align="center">
            </el-table-column> -->
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <!-- <el-table-column prop="password" label="密码" align="center">
            </el-table-column> -->
            <el-table-column prop="enabled" label="状态" align="center">
                <template slot-scope="scope">
                <span :class="scope.row.enabled == 1 ? 'green' : 'red'">{{
                  scope.row.enabled == 1 ? "启用" : "停用"
                }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button
                            @click="editArea(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                    >编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog
                :before-close="closeDialog"
                :title="dialogTitle"
                :visible.sync="dialogFormVisible"
                class="dialogs"
        >
            <el-form
                    :model="form"
                    :inline="true"
                    :rules="rules"
                    label-width="80px"
                    ref="areaForm"
            >
                <el-divider content-position="left">基本信息</el-divider>
                <el-form-item label="头像" prop="headImgUrl">
                    <el-upload
                            class="avatar-uploader"
                            :action="`${path}/fileUploadAndDownload/upload`"
                            list-type="picture-card"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="form.headImgUrl" :src="form.headImgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="form.roleId" placeholder="请选择角色" size="small" clearable>
                        <el-option
                                v-for="item in roleOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账户名称" prop="username">
                    <el-input
                            autocomplete="off"
                            v-model="form.username"
                            size="small"
                            placeholder="请输入账户名称"
                            clearable
                    ></el-input>
                </el-form-item>
                <!--        <el-form-item label="性别" prop="sex">-->
                <!--          <el-select v-model="form.sex" placeholder="请选择性别" size="small" clearable>-->
                <!--            <el-option-->
                <!--              v-for="item in sexOptions"-->
                <!--              :key="item.value"-->
                <!--              :label="item.label"-->
                <!--              :value="item.value"-->
                <!--            >-->
                <!--            </el-option>-->
                <!--          </el-select>-->
                <!--        </el-form-item>-->
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-divider content-position="left">地址信息</el-divider>
                <el-form-item label="区域" prop="areaId">
                    <!-- <el-select
                            v-model="form.areaId"
                            placeholder="请选择区域"
                            size="small"
                            clearable
                    >
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select> -->
                    <el-cascader :options="areaOptions" v-model="form.areaId" :props="props"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input
                            autocomplete="off"
                            v-model="form.address"
                            size="small"
                            placeholder="详细地址"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input
                            autocomplete="off"
                            v-model="form.mobile"
                            size="small"
                            placeholder="请输入手机号"
                            clearable
                    ></el-input>
                </el-form-item>
                <el-divider content-position="left" v-if="form.roleId === 3">抽佣信息</el-divider>
                <el-form-item label="是否抽佣" prop="commissionStatus" v-if="form.roleId === 3">
                    <el-select v-model="form.commissionStatus" placeholder="请选择" size="small" clearable>
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="抽佣比例" prop="commissionRatio" v-if="form.commissionStatus === 1">
                    <el-input placeholder="抽佣比例" v-model="form.commissionRatio" size="small" clearable>
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button @click="enterDialog" type="primary" size="small"
                >确 定
                </el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {
  loadChildData,
  getAreaList,
} from "@/api/api";
    import {addUser, editUser, userDetail, userList} from "@/api/account";
    import infoList from "@/components/mixins/infoList";

    export default {
        name: "account",
        mixins: [infoList],
        data() {
            const checkPassword = (rule, value, callback) => {
                if (value.length < 6 || value.length > 20) {
                    return callback(new Error("请输入6~20个字符"));
                } else {
                    callback();
                }
            };
            const checkPhone = (rule, value, callback) => {
                const reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的手机号码"));
                } else {
                    callback();
                }
            };
            let _self = this
            return {
                areaOptions:[],
                props: {
                label: 'name',
                value: 'areaId',
                lazy: true,//设置lazyLoad，必须配合lazy：true
                checkStrictly: true,
                async lazyLoad(node, resolve) { // 区域树懒加载的方法
                console.log(node)
                    const { data } = node;
                    console.log(data)
                    const temp = await _self.getSta(data.areaId);
                    console.log(temp)
                    // for (const item of temp) {
                    //     item.leaf = (item.level === 'city');
                    // }
                    resolve(temp);
                }
            },
                path: process.env.VUE_APP_BASE_API,
                sexOptions: [
                    {
                        value: 0,
                        label: "女",
                    },
                    {
                        value: 1,
                        label: "男",
                    },
                ],
                statusOptions: [
                    {
                        value: 0,
                        label: "否",
                    },
                    {
                        value: 1,
                        label: "是",
                    },
                ],
                roleOptions: [
                    {
                        value: 3,
                        label: "机构",
                    },
                    {
                        value: 4,
                        label: "学校",
                    },
                    {
                        value: 5,
                        label: "教育局",
                    },
                    {
                        value: 2,
                        label: "管理员",
                    },
                ],
                listApi: userList,
                dialogFormVisible: false,
                dialogTitle: "新增账号",
                form: {},
                type: "",
                rules: {
                    username: [
                        {required: true, message: "请输入账户名称", trigger: "blur"},
                    ],
                    roleId: [{required: true, message: "请选择角色", trigger: "change"}],
                    areaId: [
                        {required: true, message: "请选择区域", trigger: "change"},
                    ],
                    sex: [
                        {required: true, message: "请选择性别", trigger: "change"},
                    ],
                    mobile: [
                        {required: true, message: "请输入手机号", trigger: "blur"},
                        {validator: checkPhone, trigger: "blur"}
                    ],
                    // props: [{ required: true, message: "请输入抽佣比例", trigger: "blur" }],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {validator: checkPassword, trigger: "blur"}
                    ],
                },
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            beforeAvatarUpload() {
            },
            handleAvatarSuccess() {
            },
            async getSta(id) {
                const res = await loadChildData(id)
            return res.data;
        },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            initForm() {
                this.$refs.areaForm.resetFields();
                this.form = {
                    path: "",
                    apiGroup: "",
                    method: "",
                    description: "",
                };
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
            },
            openDialog(type) {
                switch (type) {
                    case "add":
                        this.dialogTitle = "新增账号";
                        break;
                    case "edit":
                        this.dialogTitle = "编辑账号";
                        break;
                    default:
                        break;
                }
                this.type = type;
                this.dialogFormVisible = true;
            },
            async editArea(row) {
                const res = await userDetail(row.userId)
                this.form = res.data;
                // console.log(this.form)
                this.openDialog("edit");
            },
            async deleteAreas(row) {
                this.$confirm("此操作将永久删除该地区, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await deleteArea(row.areaId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            async enterDialog() {
                this.$refs.areaForm.validate(async (valid) => {
                    if (valid) {
                        switch (this.type) {
                            case "add": {
                                // console.log(this.form)
                                const {username, roleId, sex, areaId, commissionStatus, commissionRatio, mobile, remarks, headImgUrl, address} = this.form
                                const res = await addUser({
                                    username,
                                    roleId,
                                    sex,
                                    areaId,
                                    commissionStatus,
                                    commissionRatio,
                                    mobile,
                                    remarks,
                                    headImgUrl,
                                    address
                                });
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "添加成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }

                                break;
                            case "edit": {
                                {
                                }
                                const res = await editUser(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "编辑成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            default: {
                                this.$message({
                                    type: "error",
                                    message: "未知操作",
                                    showClose: true,
                                });
                            }
                                break;
                        }
                    }
                });
            },
            //文件上传
            checkFile(file) {
                this.fullscreenLoading = true;
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                return (isPng || isJPG) && isLt2M;
            },
            uploadSuccess(res) {
                this.fullscreenLoading = false;
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    if (res.code == 0) {
                        this.getTableData();
                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            },
            uploadError() {
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.fullscreenLoading = false;
            },
        },
       async  created() {
            this.getTableData();
        const res = await getAreaList()
        this.areaOptions = res.data
        },
    };
</script>
<style scoped lang="scss">
    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }
    }

    .warning {
        color: #dc143c;
    }
</style>



<template>
  <div class="wrap custom-table-container">
    <BasicTable
      ref="basicTable"
      :columns="columns"
      :api="dataApi"
      @handle-click="handleClick"
      useSearchForm
      selection
      :handleBtns="handleBtns"
      :formConfig="formConfig"
      @resetSearchInfo="handleReset"
      @handleMultipleSelection="multipleSelection = $event"
    >
      <template #action="{ record }">
        <el-dropdown @command="handleClick($event, record)" trigger="click">
          <el-button type="primary" class="el-option-table-btn">
            <i class="el-icon-setting el-icon--left"></i>
            操作
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">上传</el-dropdown-item>
            <el-dropdown-item :command="2">下载</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </BasicTable>
    <!-- 上传弹窗 -->
    <el-dialog
      :visible.sync="showModalUpload"
      v-if="showModalUpload"
      :title="title"
      width="60%"
      top="10vh"
      center
      :close-on-click-modal="false"
    >
      <!-- <el-form
        :model="formData"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="订单号" prop="orderno" v-if="title != '批量上传'">
          <template>
            <span>{{ formData.orderno }}</span>
          </template>
        </el-form-item>
        <el-form-item label="上传文件" prop="attachmentPath">
          <el-row>
            <el-col :span="8">
              <el-upload
                class="upload-demo hastip updatebtn"
                action
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :http-request="UploadSubmit"
                :on-remove="remove"
                :limit="1"
                :file-list="saveFileList"
              >
                <el-button type="primary" size="mini">
                  选择文件
                  <vab-icon icon="upload-cloud-2-line" />
                </el-button>
              </el-upload>
            </el-col>
            <el-col :span="6">
              {{
                saveFileList.length == 1
                  ? saveFileList[0].name
                  : '未选择任何文件'
              }}
            </el-col>
          </el-row>
        </el-form-item>
      </el-form> -->
      <div id="printTest" style="width: 720px; margin: 0 auto">
        <el-form
          :model="dynamicValidateForm"
          :rules="rules"
          ref="dynamicValidateForm"
          label-width="auto"
        >
          <el-row>
            <el-button type="primary" @click="handleAdd">+</el-button>
          </el-row>
          <el-form-item
            prop="email"
            label="邮箱"
            :rules="[
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              {
                type: 'email',
                message: '请输入正确的邮箱地址',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="dynamicValidateForm.email"></el-input>
          </el-form-item>
          <el-table
            :data="dynamicValidateForm.domains"
            tooltip-effect="dark"
            size="small"
          >
            <template>
              <el-table-column label="名称" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`domains.${scope.$index}.name`"
                    :rules="{
                      required: true,
                      message: '名称不能为空',
                      trigger: 'blur',
                    }"
                  >
                    {{ scope.$index }}
                    <el-input
                      v-model="dynamicValidateForm.domains[scope.$index].name"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="handleDelete(scope.$index)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">
          <vab-icon icon="close-circle-line" />
          取消
        </el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">
          <vab-icon icon="save-3-line" />
          提交
        </el-button>
        <el-button type="primary" v-print="'#printTest'">打印</el-button>
        <el-button @click="resetBtn">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import columns from './columns'
import editorBar from '@/lib/WangEditor'
import { getUserList } from '@/api/system/userManagement'
import productInfo from './components/productInfo.vue'
import { StatusList } from '@/api/dress/orderManage/customizedOrder'
import { SaveUploadFile } from '@/api/user'
export default {
  mixins: [columns],
  name: 'CustomizedOrder',
  components: { editorBar, productInfo },
  data() {
    return {
      userList: [],
      dataApi: StatusList,
      drawerVisible: false,
      multipleSelection: [],
      showModalUpload: false,
      formData: {},
      title: '文件上传',
      saveFileList: [],
      keys: 0,
      dynamicValidateForm: {
        email: '',
        domains: [],
      },
      personsOptions: [
        {
          label: '张三',
          value: 1,
        },
        {
          label: '李四',
          value: 2,
        },
      ],
      rules: {
        requireTime: [
          { required: true, message: '请输入要求时间', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ids() {
      let ids = []
      ids = this.multipleSelection.map((i) => {
        return i.id
      })
      return ids
    },
  },
  watch: {
    multipleSelection: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.handleBtns.map((i, idx) => {
            if (i.btnType === 2 || i.btnType === 3 || i.btnType === 4) {
              this.$set(this.handleBtns[idx], 'disabled', false)
            }
          })
        } else {
          this.handleBtns.map((i, idx) => {
            if (i.btnType === 2 || i.btnType === 3 || i.btnType === 4) {
              this.$set(this.handleBtns[idx], 'disabled', true)
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initData()
  },
  mounted() {
    this.handleReset()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleAdd() {
      this.keys++
      this.dynamicValidateForm.domains.push({
        name: '',
        key: Date.now(),
      })
      console.log(this.dynamicValidateForm)
      this.$forceUpdate()
      // this.dynamicValidateForm.domains.push(row)
    },
    handleDelete(index) {
      this.dynamicValidateForm.domains.splice(index, 1)
    },
    fetchData() {
      this.$refs['basicTable'].getData()
    },
    filterColors(val) {
      switch (val) {
        case 1:
          return 'color1'
        case 2:
          return 'color2'
        case 3:
          return 'color3'
        case 4:
          return 'color4'
        case 5:
          return 'color5'
        default:
          break
      }
    },
    close() {
      this.showModalUpload = false
    },
    handleExceed(files, fileList) {
      // 上传文件个数超过定义的数量
      this.$message.error(`当前限制选择 1 个文件，请删除后继续上传`)
    },
    beforeUpload(file) {
      // 上传文件之前的钩子
      //判断文件格式
      let fileLength = file.name.split('.')
      let hz = fileLength[fileLength.length - 1]
      console.log(hz)
      if (hz != 'zip') {
        this.$message.error(`文件格式不正确!`)
        return false
      }
    },
    async UploadSubmit(item) {
      // 提交上传接口
      // console.log(item)
      let fileObj = item.file
      const form = new FormData() // FormData 对象
      form.append('file', fileObj) // 文件对象  'file'是后台接收的参数名
      const res = await SaveUploadFile(form)
      console.log(res)
      if (res.statuscode == 0) {
        this.saveFileList = []
        this.saveFileList.push({
          name: res.data.filename,
          url: res.data.filepath,
          systemattachmenturl: res.data.filepath,
          systemattachmentname: res.data.filename,
        })
        this.$baseMessage(
          '上传成功',
          'success',
          false,
          'vab-hey-message-success'
        )
      } else {
        this.$baseMessage(
          res.errormessage,
          'error',
          false,
          'vab-hey-message-error'
        )
      }
    },
    remove(files, fileList) {
      this.resetBtn()
    },
    resetBtn() {
      this.saveFileList = []
    },
    async initData() {
      try {
        let { data } = await getUserList({ isOn: true })
        this.userList = data.map((m) => {
          m.label = m.username
          m.value = m.id
          return m
        })
        for (var r in this.formConfig.schemas) {
          if (this.formConfig.schemas[r].field == 'creatorIds') {
            this.formConfig.schemas[r].componentProps.options = this.userList
          } else if (this.formConfig.schemas[r].field == 'operationType') {
            this.formConfig.schemas[r].componentProps.options = this.typeOptions
          } else if (this.formConfig.schemas[r].field == 'receiptStatus') {
            this.formConfig.schemas[r].componentProps.options =
              this.statusOptions
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleReset() {
      // 条件重置
      let that = this
      that.$nextTick(() => {
        that.$refs['basicTable'].$refs['searchForm'].formModel.beginTime = ''
        that.$refs['basicTable'].$refs['searchForm'].formModel.endTime = ''
        that.$refs['basicTable'].$refs['searchForm'].formModel.timer = []
      })
    },
    formReset() {
      this.saveFileList = []
      this.formData = {
        orderProductIds: '',
        orderno: '',
        attachmentPath: '',
      }
    },
    // 点击操作
    handleClick(btnType, row) {
      switch (btnType) {
        case 1: //上传
          this.formReset()
          this.showModalUpload = true
        default:
          break
      }
    },
    saveFactoryAttachment() {
      this.saveFileList.length > 0
        ? (this.formData.attachmentPath = this.saveFileList[0].url)
        : (this.formData.attachmentPath = '')
      if (this.saveFileList.length !== 1) {
        this.$alert('请上传附件', '信息提示', {
          confirmButtonText: '是',
          type: 'error',
        })
        return false
      }
      console.log('hhhh', this.formData)
    },
  },
}
</script>
<style lang='scss' scoped>
.color1 {
  background-color: #409eff;
  border-color: #409eff;
}
.color2 {
  background-color: #e6a23c;
  border-color: #e6a23c;
}
.color3 {
  background-color: #67c23a;
  border-color: #67c23a;
}
.color4 {
  background-color: #909399;
  border-color: #909399;
}
.color5 {
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.active {
  color: #f56c6c;
}
.disActive {
  color: #67c23a;
}
</style>