spfm-market-front/src/components/el-formTable.vue

<template>
  <div>
    <div>
      <div class="flex-title">需求申请单</div>
      <el-form
        ref="form"
        :model="form"
        :rules="rule"
        label-width="130px"
        style="margin-top: 30px"
        :disabled="disabled"
      >
        <div class="flex-header">
          <el-form-item label="需求名称:" prop="needName">
            <el-input v-model="form.needName"></el-input>
          </el-form-item>
          <el-form-item label="申请部门:" prop="applyDept">
            <el-input v-model="form.applyDept"></el-input>
          </el-form-item>
          <el-form-item label="申请科室:" prop="applyDepartment">
            <el-input v-model="form.applyDepartment"></el-input>
          </el-form-item>
          <el-form-item label="提出人:" prop="proposer">
            <el-input v-model="form.proposer"></el-input>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="需求决策编号:">
            <el-input v-model="form.needNo" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="需求来源:" prop="needSource">
            <el-select v-model="form.needSource" placeholder="请选择">
              <el-option
                v-for="(item, index) in options"
                :label="item.label"
                :value="item.label"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-input-tare flex-header">
          <el-form-item
            label="需求背景及目的"
            label-width="120px"
            prop="needBackdrop"
          >
            <el-input type="textarea" v-model="form.needBackdrop"></el-input>
          </el-form-item>
        </div>
        <div class="flex-input-tare flex-header">
          <el-form-item label="需求内容" label-width="120px" prop="needContent">
            <el-input type="textarea" v-model="form.needContent"></el-input>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="重要程度:" prop="importance">
            <el-select v-model="form.importance" placeholder="请选择">
              <el-option label="重要" value="重要"></el-option>
              <el-option label="普通" value="普通"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否数智化需求:"
            label-width="130px"
            prop="isDigitization"
          >
            <el-select v-model="form.isDigitization" placeholder="请选择">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否七大工程需求:"
            label-width="140px"
            prop="isSevenProject"
          >
            <el-select v-model="form.isSevenProject" placeholder="请选择">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否需求目录框架需求:" label-width="160px">
            <el-select v-model="form.isMarketMeeting" placeholder="请选择">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="一级目录:">
            <el-select v-model="form.firstDirectory" placeholder="一级目录">
              <el-option
                v-for="(item, index) in oneList"
                :label="item.categoryName"
                :value="item.categoryName"
                :key="index"
                >{{ item.categoryName }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录:" v-if="twoStatus">
            <el-select v-model="form.secondDirectory" placeholder="二级目录">
              <el-option
                v-for="(item, index) in twoList"
                :label="item.categoryName"
                :value="item.categoryName"
                :key="index"
                >{{ item.categoryName }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="三级目录:" v-if="threeStatus">
            <el-select v-model="form.thirdDirectory" placeholder="三级目录">
              <el-option
                v-for="(item, index) in threeList"
                :label="item.categoryName"
                :value="item.categoryName"
                :key="index"
                >{{ item.categoryName }}</el-option
              >
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="四级目录:" v-if="fourStatus">
            <el-select v-model="form.fourthDirectory" placeholder="四级目录">
              <el-option
                v-for="(item, index) in fourList"
                :label="item.categoryName"
                :value="item.categoryName"
                :key="index"
                >{{ item.categoryName }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="五级目录:" v-if="fiveStatus">
            <el-select v-model="form.fifthDirectory" placeholder="五级目录">
              <el-option
                v-for="(item, index) in fiveList"
                ::label="item.categoryName"
                :value="item.categoryName"
                :key="index"
                >{{ item.categoryName }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="系统归属:">
            <el-input v-model="form.sysBelong" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="功能开发承载平台:" label-width="130px">
            <el-input v-model="form.functionBearPlatform"></el-input>
          </el-form-item>
          <el-form-item label="功能展示应用平台:" label-width="130px">
            <el-input v-model="form.functionShowPlatform"></el-input>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="需求类型:">
            <el-select
              v-model="form.needType"
              placeholder="请选择"
              @change="changeSelect"
            >
              <el-option label="功能开发类" value="功能开发类"></el-option>
              <el-option label="报表开发类" value="报表开发类"></el-option>
              <el-option label="数智类" value="数智类"></el-option>
              <el-option
                label="功能开发和报表开发类"
                value="功能开发和报表开发类"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="需求功能时效:">
            <el-select v-model="form.needAging" placeholder="请选择">
              <el-option label="固定时限" value="固定时限"></el-option>
              <el-option label="长期有效" value="长期有效"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="功能到期时间:">
            <el-date-picker
              type="date"
              :disabled="timeStatus"
              placeholder="选择日期"
              v-model="form.dueTime"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div v-if="functionStatus">
          <div class="flex-title" style="color: #0783cd">
            功能开发类,数智类填写
          </div>
          <div class="flex-header">
            <el-form-item label="是否涉及敏感信息:" label-width="130px">
              <el-select v-model="form.isSensitiveData" placeholder="请选择">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="敏感信息范围:">
              <el-input
                v-model="form.sensitiveRange"
                :disabled="isSensitiveDataStatus"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-header">
            <el-form-item label="上线配合测试地市:" label-width="130px">
              <el-input v-model="form.onlineTestCity"></el-input>
            </el-form-item>
          </div>
          <div class="flex-header">
            <el-form-item label="功能完成时间:" label-width="130px">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.doneTime"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="是否需要模糊化:" label-width="120px">
              <el-select v-model="form.isVaguev" placeholder="请选择">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否需要纳入金库模式:" label-width="160px">
              <el-select v-model="form.isVaultMode" placeholder="请选择">
                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div v-if="reportStatus">
          <div class="flex-title" style="color: #d93f3f">报表开发类填写</div>
          <div class="flex-header">
            <el-form-item label="具体业务:">
              <el-input v-model="form.justBusiness"></el-input>
            </el-form-item>
          </div>
          <div class="flex-header">
            <el-form-item label="展现周期:">
              <el-select v-model="form.showCycle" placeholder="请选择">
                <el-option label="日" value="日"></el-option>
                <el-option label="周" value="周"></el-option>
                <el-option label="月" value="月"></el-option>
                <el-option label="季度" value="季度"></el-option>
                <el-option label="年" value="年"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="展现类型:">
              <el-select v-model="form.showType" placeholder="请选择">
                <el-option label="报表" value="报表"></el-option>
                <el-option label="模型" value="模型"></el-option>
                <el-option label="明细" value="明细"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据粒度:">
              <el-select v-model="form.dataSize" placeholder="请选择">
                <el-option label="统计" value="统计"></el-option>
                <el-option label="明细" value="明细"></el-option>
                <el-option label="综合" value="综合"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="flex-header" style="display: flex; flex-direction: column">
          <el-form-item label="附件:">
            <my-upload
              @uploadBack="uploadBack"
              @clickDownload="download"
              :fileInfo="fileInfo"
              :fileList="list.mkFileShareAttachList"
              style="width: 30% !important"
            ></my-upload>
          </el-form-item>
          <div @click="downExcel" class="el-upload__tip" slot="tip">
            备注内容：PPT（非市场部需求以及市场部非框架内需求需要通过市场决策会决议，请上传ppt）、《业务需求模板.xlsx》《后评估模板.xlsx》
            《敏感信息范围说明.xlsx》填写并上传。
          </div>
        </div>
        <!-- 处理人意见模块 -->

        <!-- 流程追踪模块 -->
      </el-form>
    </div>
    <div></div>
    <div></div>
  </div>
</template>

<script>
import myUpload from "../../../../components/upload";

export default {
  components: {
    myUpload,
  },
  data() {
    return {
      fileInfo: {
        type: "bt1n",
        typename: "上传文件",
        limit: 5,
        url: "/market/waf/upload",
        fileList: [],
      },
      oneList: [],
      childrenList: [],
      twoList: [],
      twoStatus: false,
      threeList: [],
      threeStatus: false,
      fourList: [],
      fourStatus: false,
      fiveList: [],
      fiveStatus: false,
      isSensitiveDataStatus: false,
      timeStatus: false,
      functionStatus: false,
      reportStatus: false,
      Length: "",
      form: {
        // needName: "", //需求名称
        // applyDept: "", //申请部门
        // applyDepartment: "", //申请科室
        // proposer: "", //提出人
        // needNo: "", //需求决策编号
        // line: "", //线条？？？？？
        // needSource: "", //需求来源
        // needBackdrop: "", //需求背景
        // needContent: "", //需求内容
        // importance: "", //重要程度
        // isDigitization: "", //是否数智化
        // isSevenProject: "", //是否七大工程需求
        // isMarketMeeting: "", //是否需要通过市场决策会
        // first_directory: "", //一级目录
        // second_directory: "", //二级目录
        // third_directory: "", //三级目录
        // fourth_directory: "", //四级目录
        // fifth_directory: "", //五级目录
        // sys_belong: "", //系统归属
        // function_bear_platform: "", //功能开发承载平台
        // function_show_platform: "", //功能展示应用平台
        // need_type: "", //需求类型
        // need_aging: "", //需求功能时效
        // due_time: "", //功能到期时间
        // is_sensitive_data: "", //是否涉及敏感信息
        // sensitive_range: "", //敏感信息范围
        // online_test_city: "", //上线配合测试城市
        // done_time: "", //期待完成时间
        // is_vaguev: "", //是否需要模糊化
        // is_vault_mode: "", //是否金库模式
        // just_business: "", //具体业务
        // show_cycle: "", //展现周期
        // show_type: "", //展现类型
        // data_size: "", //数据粒度
        // append_id: "", //附件id
        // state: "", //状态
        // dept_person_opinion: "", //部门人员处理意见
        // dept_leader_opinion: "", //部门领导处理意见
        // market_admin_opinion: "", //市场需求管理员处理意见
      },
      options: [
        {
          label: "1-免上会-集团需求",
          value: 0,
        },
        {
          label: "2-免上会-接口联调",
          value: 1,
        },
        {
          label: "3-免上会-短信类",
          value: 2,
        },
        {
          label: "4-免上会-报表类",
          value: 3,
        },
        {
          label: "5-免上会-提数类",
          value: 4,
        },
        {
          label: "6-免上会-功能优化类",
          value: 5,
        },
        {
          label: "7-免上会-查询类",
          value: 6,
        },
        {
          label: "8-免上会-界面优化类",
          value: 7,
        },
        {
          label: "9-免上会-数智应用类",
          value: 8,
        },
        {
          label: "10-免上会-酬金规则类",
          value: 9,
        },
        {
          label: "11-需审议（需求复杂，需要重点审议）",
          value: 10,
        },
      ],
      timeRule: {
        doneTime: [
          { required: true, message: "请选择正确的时间", trigger: "change" },
        ],
      },

      rules: {
        firstDirectory: [
          { required: true, message: "请选择一级目录", trigger: "change" },
        ],
        secondDirectory: [
          { required: true, message: "请选择二级目录", trigger: "change" },
        ],
        thirdDirectory: [
          { required: true, message: "请选择三级目录", trigger: "change" },
        ],
        fourthDirectory: [
          { required: true, message: "请选择四级目录", trigger: "change" },
        ],
        fifthDirectory: [
          { required: true, message: "请选择五级目录", trigger: "change" },
        ],
      },
      rule: {
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],

        applyDept: [
          { required: true, message: "请输入申请部门", trigger: "blur" },
        ],
        applyDepartment: [
          { required: true, message: "请输入申请课室", trigger: "blur" },
        ],
        proposer: [
          { required: true, message: "请输入提出人", trigger: "blur" },
        ],
        needSource: [
          { required: true, message: "请输入需求来源", trigger: "change" },
        ],
        needBackdrop: [
          { required: true, message: "请输入需求背景", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "长度在 1 到 300 个字符",
            trigger: "blur",
          },
        ],
        needContent: [
          { required: true, message: "请输入需求内容", trigger: "blur" },
          {
            min: 1,
            max: 300,
            message: "长度在 1 到 300 个字符",
            trigger: "blur",
          },
        ],
        importance: [
          { required: true, message: "请选择重要程度", trigger: "change" },
        ],
        isDigitization: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        isSevenProject: [
          { required: true, message: "请选择七大工程需求", trigger: "change" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
        needName: [
          { required: true, message: "请输入需求名称", trigger: "blur" },
        ],
      },
      isList: [],
    };
  },
  props: {
    list: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: () => {},
    },
  },
  created() {
    this.getOneList();
    this.form = this.list;
    this.isList = this.list;
    if (this.list.secondDirectory) {
      this.twoStatus = true;
    }
    if (this.list.thirdDirectory) {
      this.threeStatus = true;
    }
    if (this.list.fourthDirectory) {
      this.fourStatus = true;
    }
    if (this.list.fifthDirectory) {
      this.fiveStatus = true;
    }
  },
  watch: {
    "form.doneTime": {
      handler(newVal) {
        if (newVal) {
          let changeTime = newVal.toString().replace("/-/g", "/");
          let nowTime = new Date(changeTime).getTime();
          if (nowTime <= new Date().getTime()) {
            this.$message.error("请选择正确的时间");
            this.rule = { ...this.rule, ...this.timeRule };
          }
        }
      },
    },
    "form.isMarketMeeting": {
      handler(newVal, oldVal) {
        if (newVal === "是") {
          this.rule = { ...this.rule, ...this.rules };
        }
      },
    },
    "form.needType": {
      handler(e, q) {
        if (e == "功能开发类" || e == "数智类") {
          this.functionStatus = true;
          this.reportStatus = false;
        } else if (e == "报表开发类") {
          this.reportStatus = true;
          this.functionStatus = false;
        } else {
          this.functionStatus = true;
          this.reportStatus = true;
        }
      },
    },
    "form.isSensitiveData": {
      handler(newVal, oldVal) {
        if (newVal == "否") {
          this.isSensitiveDataStatus = true;
          this.form.sensitiveRange = "";
        } else {
          this.isSensitiveDataStatus = false;
        }
      },
    },
    "form.firstDirectory": {
      handler(newVal, oldVal) {
        this.form.sysBelong = newVal;
        if (oldVal) {
          if (newVal !== oldVal) {
            [
              this.form.secondDirectory,
              this.form.thirdDirectory,
              this.form.fourthDirectory,
              this.form.fifthDirectory,
            ] = "";
            [this.twoList, this.threeList, this.fourList, this.fiveList] = [];
            // [this.threeStatus, this.fourStatus, this.fiveStatus] = false;
          }
        }

        this.oneList.map((item) => {
          if (newVal === item.categoryName) {
            this.getChirdenList(item.id);
          }
        });
      },
    },
    childrenList: {
      handler(newVal) {
        switch (newVal[0].layer) {
          case 2:
            this.twoList = this.childrenList;
            if (this.childrenList.length !== 0) {
              this.twoStatus = true;
            } else {
              this.twoList = false;
            }
            break;
          case 3:
            this.threeList = this.childrenList;
            if (this.childrenList.length !== 0) {
              this.threeStatus = true;
            } else {
              this.threeStatus = false;
            }
            break;
          case 4:
            this.fourList = this.childrenList;
            if (this.childrenList.length !== 0) {
              this.fourStatus = true;
            } else {
              this.fourStatus = false;
            }
            break;
          case 5:
            if (this.childrenList.length !== 0) {
              this.fiveStatus = true;
            } else {
              this.fiveStatus = false;
            }
            this.fiveList = this.childrenList;
            break;
        }
      },
    },
    "form.secondDirectory": {
      handler(newVal, oldVal) {
        if (oldVal) {
          if (newVal !== oldVal) {
            [
              this.form.thirdDirectory,
              this.form.fourthDirectory,
              this.form.fifthDirectory,
            ] = "";
            [this.threeList, this.fourList, this.fiveList] = [];
            // [this.fourStatus, this.fiveStatus] = false;
            // this.fourStatus = false;
          }
        }
        if (newVal !== undefined) {
          this.twoList.map((item) => {
            if (newVal === item.categoryName) {
              this.getChirdenList(item.id);
            }
          });
        } else {
          this.threeStatus = false;
          this.fourStatus = false;
        }
      },
    },
    "form.thirdDirectory": {
      handler(newVal, oldVal) {
        if (oldVal) {
          if (newVal !== oldVal) {
            [this.form.fourthDirectory, this.form.fifthDirectory] = "";
            [this.fourList, this.fiveList] = [];
            // [this.fiveStatus] = false;
          }
        }
        if (newVal !== undefined) {
          this.threeList.map((item) => {
            if (newVal === item.categoryName) {
              this.getChirdenList(item.id);
            }
          });
        } else {
          this.fiveStatus = false;
          this.fourStatus = false;
        }
      },
    },
    "form.fourthDirectory": {
      handler(newVal, oldVal) {
        if (oldVal) {
          if (newVal !== oldVal) {
            // [this.form.fifthDirectory] = "";
            // [this.fiveList] = [];
          }
        }
        if (newVal !== undefined) {
          this.fourList.map((item) => {
            if (newVal === item.categoryName) {
              this.getChirdenList(item.id);
            }
          });
        } else {
          this.fiveStatus = false;
        }
      },
    },

    // 'form.fifthDirectory':{
    //     handler(newVal){
    //     if(this.isList.fifthDirectory){
    //         this.fiveStatus = true
    //     }
    //     }
    // },
    // 'list':{
    // handler(newVal,oldVal){
    //     console.log(newVal)
    // }
    // },
    "form.needAging": {
      handler(newVal, oldVal) {
        if (newVal == "长期有效") {
          this.timeStatus = true;
          this.form.dueTime = "";
        } else {
          this.timeStatus = false;
        }
      },
    },
  },
  methods: {
    clickLLength(e) {
      if (e !== 0) {
        this.Length = true;
      } else {
        this.Length = false;
      }
    },
    clickSelect(e) {},

    uploadBack(v) {
      if (this.form.mkFileShareAttachList) {
        this.form.mkFileShareAttachList = [];
        this.form.mkFileShareAttachList = v;
      } else {
        let mkFileShareAttachList = [];
        mkFileShareAttachList = v;
        this.$set(this.form, "mkFileShareAttachList", mkFileShareAttachList);
      }
    },
    download() {
      if (this.form.mkFileShareAttachList.length > 1) {
        this.$http({
          url: "/market/CMKFile/downAllFile",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          responseType: "blob",
          data: { mkFileShareAttachList: this.form.mkFileShareAttachList },
        }).then((response) => {
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel",
            });
            window.navigator.msSaveOrOpenBlob(
              blob,
              new Date().getTime().toString() + ".zip"
            );
          } else {
            /* 火狐谷歌的文件下载方式 */
            var blob = new Blob([response.data]);
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = this.form.needName + ".zip";
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
          }
          if (this.infolist.authType === "3") {
            this.dialogCli(10);
          }
        });
      } else {
        let list = {
          id: this.form.mkFileShareAttachList[0].fileCode,
          fileName: this.form.mkFileShareAttachList[0].fileName,
        };
        this.$http({
          url: "/market/waf/downFile",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          responseType: "blob",
          data: list,
        }).then((response) => {
          console.log(response);
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel",
            });
            //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
            window.navigator.msSaveOrOpenBlob(
              blob,
              this.form.mkFileShareAttachList[0].fileName
            );
          } else {
            /* 火狐谷歌的文件下载方式 */
            var blob = new Blob([response.data]);
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download =
              this.form.mkFileShareAttachList[0].fileName;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
          }
        });
      }
    },
    //上传文件钩子函数
    clickUpload(file) {},
    //下载文件
    downExcel() {
      this.$http({
        url: "/market/waf/downLoadTemp",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: {},
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(
            blob,
            new Date().getTime().toString() + ".zip"
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = this.form.needName + ".zip";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    changeSelect(e) {},
    getOneList() {
      this.$http({
        url: "/market/category/getCategoryLevel1",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.oneList = res.data;
      });
    },
    async getChirdenList(e) {
      await this.$http({
        url: "/market/category/getChildListById",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { id: e },
      }).then((res) => {
        this.childrenList = res.data;
        this.clickLLength(res.data.length);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list {
  width: 23rem;
}
.flex-title {
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  border-bottom: 1px solid #e1e1e1;
  font-weight: bold;
}
.flex-header {
  margin-top: 20px;
  display: flex;
  //   justify-content: space-between;
  border-bottom: 1px solid #e1e1e1;
  ::v-deep .el-form-item {
    width: 20%;
    margin-right: 5%;
  }
}
.flex-input-tare {
  ::v-deep .el-form-item {
    width: 100%;
    margin-right: 5%;
  }
}
.el-upload__tip {
  color: red;
}
::v-deep .el-input--suffix .el-input__inner {
  width: 119% !important;
}
</style>