spfm-market-front/src/pages/main/leader/components/formTable.vue

<template>
  <div>
    <div>
      <div class="flex-title">需求申请单</div>
      <el-form
        ref="form"
        :model="form"
        :rules="rule"
        :disabled="disabled"
        label-width="200px"
      >
        <div class="flex-header">
          <el-form-item
            style="width: 44%"
            label="需求名称:"
            prop="needName"
            label-width="140px"
          >
            <el-input v-model="form.needName"></el-input>
          </el-form-item>
          <el-form-item label="申请部门:" prop="applyDept">
            <el-input v-model="form.applyDept" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请科室:" prop="applyDepartment">
            <el-input
              v-model="form.applyDepartment"
              :disabled="true"
            ></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>
          <el-form-item label="提出人:" prop="proposer">
            <el-input v-model="form.proposer"></el-input>
          </el-form-item>
        </div>
        <div class="flex-input-tare flex-header">
          <el-form-item label="需求背景及目的" prop="needBackdrop">
            <el-input
              type="textarea"
              maxlength="300"
              show-word-limit
              v-model="form.needBackdrop"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-input-tare flex-header">
          <el-form-item label="需求内容" prop="needContent">
            <el-input
              type="textarea"
              maxlength="300"
              show-word-limit
              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="是否数智化需求:"
            prop="isDigitization"
            label-width="200px"
          >
            <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="是否七大工程需求:"
            prop="isSevenProject"
            label-width="220px"
          >
            <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="280px">
            <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="一级目录:" prop="firstDirectory">
            <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"
            prop="secondDirectory"
          >
            <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"
            prop="thirdDirectory"
          >
            <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"
            prop="fourthDirectory"
          >
            <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"
            prop="fifthDirectory"
          >
            <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="200px">
            <el-input v-model="form.functionBearPlatform"></el-input>
          </el-form-item>
          <el-form-item label="功能展示应用平台:" label-width="200px">
            <el-input v-model="form.functionShowPlatform"></el-input>
          </el-form-item>
        </div>
        <div class="flex-header">
          <el-form-item label="需求类型:" prop="needType">
            <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"
              :picker-options="pickerOptions"
              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="200px">
              <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="200px">
              <el-input v-model="form.onlineTestCity"></el-input>
            </el-form-item>
          </div>
          <div class="flex-header">
            <el-form-item label="功能完成时间:" label-width="200px">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.doneTime"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="是否需要模糊化:" label-width="200px">
              <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="280px">
              <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 flex-upload"
          style="display: flex; flex-direction: column"
        >
          <el-form-item
            label="附件："
            prop="mkFileShareAttachList"
            label-width="120px"
          >
            <my-upload
              ref="upload"
              @uploadBack="uploadBack"
              @delloadBack="delloadBack"
              @clickDownload="download"
              :fileInfo="fileInfo"
              :fileList="list.mkFileShareAttachList"
            ></my-upload>
          </el-form-item>
          <div class="el-upload__tip" slot="tip">
            备注内容：PPT（非市场部需求以及市场部非框架内需求需要通过市场决策会决议，请上传ppt。
          </div>
          <div class="el-upload__tip" slot="tip">
            <a
              href="./static/file/a.xlsx"
              target="_blank"
              download="后评估模板.xlsx"
              >《后评估模板.xlsx》、</a
            >
            <a
              target="_blank"
              href="./static/file/c.xlsx"
              download="业务需求模板.xlsx"
              >《业务需求模板.xlsx》、</a
            >
            <a
              target="_blank"
              href="./static/file/b.xlsx"
            >
              target="_blank"
              href="./static/file/d.pptx"
              download="关于系统开发需求的汇报（第十期）.pptx"
              >《关于系统开发需求的汇报（第十期）.pptx》</a
            >
          </div>
        </div>
        <!-- 处理人意见模块 -->

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

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

export default {
  components: {
    myUpload,
  },
  data() {
    return {
      fileInfo: {
        type: "bt1n",
        typename: "上传文件",
        limit: 5,
        url: "/market/waf/upload",
        fileList: [],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      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: "服务例会",
          value: 0,
        },
        {
          label: "业务发展要求",
          value: 1,
        },
        {
          label: "市场决策会",
          value: 2,
        },
        {
          label: "地市调研",
          value: 3,
        },
        {
          label: "涉及考核指标",
          value: 4,
        },
        {
          label: "内部优化需求",
          value: 5,
        },
        {
          label: "集团公司需求",
          value: 6,
        },
        {
          label: "一线员工减负赋能",
          value: 7,
        },
      ],
      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" },
        ],
        // mkFileShareAttachList: [
        //   { required: true, validator: this.validateFiles },
        // ],
        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" },
        ],
        needType: [
          { required: true, message: "请选择需求类型", trigger: "change" },
        ],
        isSevenProject: [
          { required: true, message: "请选择七大工程需求", trigger: "change" },
        ],
      },
      copyRule: {},
      isList: [],
    };
  },
  props: {
    list: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: () => {},
    },
  },
  mounted() {
    this.copyRule = this.rule;
    if (this.list.mkFileShareAttachList) {
      this.$refs.upload.attList = this.list.mkFileShareAttachList;
      this.list.mkFileShareAttachList.map((item) => {
        item.name = item.fileName;
      });
    }

    // console.log(this.$refs.upload);
  },
  created() {
    // console.log(this.list.needName);
    // console.log(this.list.mkFileShareAttachList);
    // console.log(this.list);
    this.getOneList();
    this.form = this.list;
    // console.log(this.form);
    // alert(this.list.mkFileShareAttachList)
    // console.log(this.list.mkFileShareAttachList);
    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: {
    // "list.mkFileShareAttachList": {
    //   handler(newVal, oldVal) {
    //     console.log(newVal);
    //     //  this.$refs.upload.$refs.upload.clearFiles();
    //     // console.log(this.$refs.upload.attList = newVal

    //     // newVal.map((item) => {
    //     //   item.name = item.fileName;
    //     // });
    //     // this.$refs.upload.attList = newVal;

    //     // this.fileInfo.fileList = newVal.mkFileShareAttachList;
    //     // console.log(newVal.mkFileShareAttachList);
    //   },
    // },
    "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 };
        } else {
          this.rule = this.copyRule;
        }
        console.log(this.rule);
      },
    },
    "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] = [];
            this.fiveStatus = false;
          }
        }
        console.log(newVal);
        console.log(this.fourList);
        if (newVal !== undefined) {
          this.fourList.map((item) => {
            if (newVal === item.categoryName) {
              this.getChirdenList(item.id);
            }
          });
        }
      },
    },

    // '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: {
    disableDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    validateFiles(rule, value, callback) {
      let num = 3;

      let nameList = [
        "业务需求模板.xlsx",
        "后评估模板.xlsx",
        "敏感信息范围说明.xlsx",
      ];
      let files = this.$refs.upload.attList;
      // if (
      //   (this.form.isMarketMeeting !== "是" &&
      //     this.form.applyDept === "市场经营部") ||
      //   (this.form.applyDept !== "信息技术中心" &&
      //     this.form.applyDept !== "市场经营部")
      // ) {
      //   num++;
      // }
      if (!files.length || files.length < num) {
        callback(new Error("请上传正确的模板数量！"));
      } else {
        let arrList = [];
        for (let task of nameList) {
          let newList = files.find((item) => {
            return item.name === task;
            // }
          });
          arrList.push(newList);
        }
        // files.map((item) => {
        //   let fileIndex = item.name.lastIndexOf(".");
        //   let substrName = item.name.substr(fileIndex);
        //   if (substrName == ".pptx") {
        //     arrList.push(item);
        //   }
        // });
        // if (
        //   (this.form.isMarketMeeting !== "是" &&
        //     this.form.applyDept === "市场经营部") ||
        //   (this.form.applyDept !== "信息技术中心" &&
        //     this.form.applyDept !== "市场经营部")
        // ) {
        //   let pptList = arrList.filter((item) => {
        //     let fileIndex = item.name.lastIndexOf(".");
        //     let substrName = item.name.substr(fileIndex);
        //     return substrName == ".pptx";
        //   });
        //   if (!pptList.length) {
        //     callback(new Error("请上传ppt！"));
        //   }
        // }
        arrList.map((item) => {
          //excel命名错误
          if (item === undefined) {
            callback(new Error("请按备注中模板名称命名！"));
          }
        });
      }

      callback();
    },
    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);
      }
    },
    delloadBack(v) {
      this.form.mkFileShareAttachList = v;
      this.$http({
        url: "/market/waf/update",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.form,
      }).then((res) => {
        console.log(res);
        // if (res.data.result === 0) {
        //   this.$message.success("工作流更新成功");
        // }
      });
    },
    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, "需求申请单.zip");
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "12312312.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>
a {
  text-decoration: none;
}
::v-deep .el-upload-list {
  width: 23rem;
}
.flex-title {
  text-align: center;
  font-size: 24px;
  line-height: 60px;

  font-weight: bold;
}
.flex-header {
  margin-top: 20px;
  display: flex;
  //   justify-content: space-between;

  ::v-deep .el-form-item {
    width: 20%;
    margin-right: 60px;
  }
}
.flex-upload {
  ::v-deep .el-form-item {
    width: 100%;
  }
}
.flex-input-tare {
  ::v-deep .el-form-item {
    width: 100%;
    margin-right: 5%;
  }
  ::v-deep .el-form-item__label {
    width: 9rem !important;
  }
}
.el-upload__tip {
  color: red;
}
// ::v-deep .el-input--suffix .el-input__inner {
//   width: 119% !important;
// }
::v-deep .el-input__inner {
  color: black !important;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: black !important;
}
::v-deep .el-form-item {
  display: flex;
}
::v-deep .el-form-item__label {
  // width:100%;
  height: 50px;
  line-height: 40px !important;
  width: 130px;
  font-size: 0.5rem;
}
::v-deep .el-form-item__content {
  width: 100%;
  margin-left: 0% !important;
}
.el-select,
::v-deep.el-input_inner {
  width: 100%;
}
::v-deep.el-form-item.foldLabel .el-form-item__label {
  white-space: pre-line; /*换行显示*/
  height: 10px; /*设置lable高度，input高度一样*/
  line-height: 30px !important;
}
</style>