spfm-market-front/src/pages/main/demandDevelop/index.vue

<template>
  <fullscreen :fullscreen.sync="fullscreen" class="container">
    <div class="container-box">
      <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
      <div style="overflow: hidden">
        <el-button
          style="float: right; margin-top: 10px"
          type="primary"
          @click="dialogCheck(3)"
          >添加</el-button
        >
        <el-button
          style="float: right; margin-top: 10px; margin-right: 20px"
          type="primary"
          @click="getStanding"
          >台账</el-button
        >
      </div>
      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="demandName" label="需求名称">
          </el-table-column>
          <el-table-column prop="createName" label="申请姓名">
          </el-table-column>
          <el-table-column prop="createTimeStr" label="申请时间">
          </el-table-column>
          <el-table-column prop="stsDesc" label="状态">
            <template slot-scope="scope">
              {{
                scope.row.taskName == "信息补填" && scope.row.stsDesc == "待办"
                  ? "未办结"
                  : scope.row.stsDesc
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="dialogCheck(1, scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.sts != 1"
                @click="dialogCheck(2, scope.row)"
                >处理</el-button
              >
              <!-- <el-button size="mini" type="danger" @click="delLine(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="titname"
      :visible.sync="dialogStatus"
      width="50%"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="closedia"
      :fullscreen="true"
      :key="number"
    >
      <div v-loading="loadinged" class="simple-dialog">
        <el-form :model="infolist" ref="infolist" :rules="rules">
          <div class="info-line">
            <el-form-item prop="demandName">
              <span>需求名称</span>
              <el-input
                v-model="infolist.demandName"
                placeholder="需求名称"
                :disabled="disableStatus"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <span>需求编号</span>
              <el-input v-model="infolist.woNo" placeholder="需求编号" disabled>
              </el-input>
            </el-form-item>
            <!-- <el-form-item prop="terminal">
							<span>申请流程</span>
							<el-select clearable v-model="terminal" placeholder="申请流程" :disabled="disableStatus">
								<el-option v-for="items in options" :key="items.procId" :label="items.procName"
									:value="items.procId">
								</el-option>
							</el-select>
						</el-form-item> -->
            <el-form-item>
              <span>紧急程度</span>
              <el-select
                clearable
                v-model="infolist.urgDegree"
                placeholder="紧急程度"
                :disabled="disableStatus"
              >
                <el-option
                  v-for="items in urgDegreeopt"
                  :key="items.id"
                  :label="items.name"
                  :value="items.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>业务主题</span>
              <el-input
                v-model="infolist.busiSubject"
                placeholder="业务主题"
                :disabled="disableStatus"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <span>需求类别</span>
              <el-select
                clearable
                v-model="infolist.demandTypeCode"
                placeholder="需求类别"
                :disabled="disableStatus"
              >
                <el-option
                  v-for="items in demandTypeopt"
                  :key="items.dataCode"
                  :label="items.dataName"
                  :value="items.dataCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>承载渠道</span>
              <!-- //multiple -->
              <el-select
                clearable
                multiple
                v-model="infolist.carryChannelCode"
                placeholder="承载渠道"
                :disabled="disableStatus"
              >
                <el-option
                  v-for="items in carryChannelopt"
                  :key="items.dataCode"
                  :label="items.dataName"
                  :value="items.dataCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>加载周期</span>
              <el-date-picker
                :disabled="disableStatus"
                v-model="busiTime"
                type="daterange"
                placeholder="加载周期"
                style="display: inline-flex; width: calc(100% - 120px)"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item class="info-line online">
            <span>需求背景</span>
            <el-input
              v-model="infolist.demandBackground"
              placeholder="需求背景"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10 }"
              :disabled="disableStatus"
            >
            </el-input>
          </el-form-item>
          <el-form-item class="info-line online">
            <span>需求描述</span>
            <el-input
              v-model="infolist.demandDesc"
              placeholder="需求描述"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 10 }"
              :disabled="disableStatus"
            >
            </el-input>
          </el-form-item>
          <!-- 附件展示 -->
          <div
            style="padding: 0 20px 0 120px; margin-bottom: 20px"
            v-if="disableStatus"
          >
            <uploadDown
              :datalist="datalist"
              :dialogStatus="uploadstatus"
            ></uploadDown>
          </div>
          <!-- 附件上传 -->
          <div v-if="!disableStatus" class="info-line online">
            <span style="width: 80px">附件</span>
            <el-upload
              class="info-upload"
              :limit="3"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :http-request="handleSuccess"
              :file-list="file"
              drag
              multiple
            >
              <div class="upload">
                <i class="el-icon-upload"></i>
                <p class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </p>
              </div>
            </el-upload>
          </div>
          <!-- 信息补填的情况 -->
          <el-upload
            v-if="vision == '信息补填'"
            style="float: right; margin-bottom: 20px"
            action=""
            :http-request="handleMessage"
            :show-file-list="false"
            ><el-button size="small" type="primary">导入</el-button></el-upload
          >
          <div
            style="margin: 20px 0; padding: 0 20px"
            v-if="vision == '信息补填'"
          >
            <el-table
              class="com-table"
              ref="multipleTable"
              :data="infodatas"
              tooltip-effect="dark"
              size="small"
              border
              style="width: 100%"
            >
              <el-table-column prop="infoName" label="需求承接支撑方">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.factoryName"
                    :disabled="tableSatus === '4'"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="infoName" label="涉及发生工作量">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.workLoad"
                    :disabled="tableSatus === '4'"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="120px"
                align="center"
                v-if="titname == '审批'"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    :disabled="tableSatus === '4'"
                    @click="choline(1, scope)"
                    >添加</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    :disabled="tableSatus === '4'"
                    @click="choline(2, scope)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-form-item class="info-line online" v-if="visionsts == '2'">
            <span>审批说明</span>
            <el-input
              v-model="remark"
              placeholder="审批说明"
              type="textarea"
              :rows="3"
              :disabled="titname == '查看'"
            >
            </el-input>
          </el-form-item>

          <div
            style="margin-bottom: 20px; padding: 0 20px"
            v-if="titname !== '添加'"
          >
            <el-table
              class="com-table"
              :data="rovaList"
              tooltip-effect="dark"
              size="small"
              border
              style="width: 100%"
            >
              <el-table-column prop="logNo" label="编号"> </el-table-column>
              <el-table-column prop="stepName" label="环节"> </el-table-column>
              <el-table-column prop="processName" label="处理人">
              </el-table-column>
              <el-table-column prop="processWorkNo" label="处理人工号">
              </el-table-column>
              <el-table-column prop="updateTimeStr" label="处理时间">
              </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
            </el-table>
          </div>
        </el-form>

        <div slot="footer" class="info-footer">
          <div v-if="titname === '添加' || step === '0'">
            <el-button type="primary" @click="handleApprove('送部门人员审核')"
              >送部门人员审核</el-button
            >
            <el-button type="primary" @click="handleApprove('送领导审核')"
              >送领导审核</el-button
            >
            <el-button @click="handleApprove('取消')">取消</el-button>
          </div>
          <div v-else>
            <el-button
              v-for="(item, index) in buttonList"
              :key="index"
              type="primary"
              @click="handleApprove(item)"
              >{{ item }}</el-button
            >
            <el-button @click="handleApprove('取消')">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="选择审批领导"
      :visible.sync="checkLaeder"
      width="500px"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-form>
          <el-form-item
            label="审批领导"
            :rules="{
              required: true,
              message: '请选择审批领导',
              trigger: 'change',
            }"
          >
            <el-select v-model="leader">
              <el-option
                v-for="(item, index) in leaderList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" @click="formSubmit(2)"
          >确 定</el-button
        >
        <el-button @click="checkLaeder = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="选择审批人"
      :visible.sync="checkexa"
      width="50%"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-form :model="infolist" ref="infolist" :rules="rules">
          <el-form-item prop="visiblec" class="info-line online">
            <span>审批人员</span>
            <deptTreeOnly
              class="tree"
              @treeCheck="treeCheckonly"
              :defaultList="defaultList"
              :type="depttype"
              :closeList="closeList"
              :reset-list="treeList"
              :only="only"
            ></deptTreeOnly>
            <div class="tree treeUser">
              <p v-for="(item, index) in treeList" :key="index">
                {{ item.label }}
                <i
                  v-if="item.label"
                  @click="deletes(item)"
                  class="el-icon-error"
                ></i>
              </p>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: right; padding-bottom: 20px">
          <el-button type="primary" @click="formSubmit(1)">确 定</el-button>
          <el-button @click="checkexa = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <myMessage
      :messTit="messTit"
      @closeMessage="closeMessage"
      :centerDialogVisible="centerDialogVisible"
      v-if="centerDialogVisible"
    ></myMessage>
  </fullscreen>
</template>
<script>
import myMessage from "../../../components/myMessage.vue";
import toolList from "../../../components/toolList";
import myUpload from "../../../components/upload";
import uploadDown from "../../../components/uploadDown.vue";
import deptTreeOnly from "../performance/components/deptTreeOnly.vue";
const Excel = require("exceljs");
export default {
  components: {
    // mySearch,
    myMessage,
    toolList,
    myUpload,
    uploadDown,
    deptTreeOnly,
  },
  data() {
    return {
      rules: {
        demandName: [
          {
            required: true,
            trigger: "blur",
            message: "不能为空",
          },
        ],
      },
      // 操作名称
      operateName: "",
      woNo: "",
      // 当前进行到的步骤计数
      step: "",
      tooltit: "线上渠道业务需求",
      fullscreen: false,
      total: 0,
      // pageSize: 1,
      tableData: [],
      disableStatus: true,
      // 查看 审批 添加   弹出层 状态
      page: 1,
      pageSize: 10,
      file: [], // 附件数组
      titname: "",
      dialogStatus: false,
      tableSatus: null,
      number: 0,
      // 按钮标识
      type: "",
      // 联系人
      checkLaeder: false,
      checkexa: false,
      // 审核人组件只可选一人
      leader: "",
      leaderList: [
        {
          label: "王其侠(二级经理正职)",
          value: "wangqixia",
        },
        {
          label: "张志伟(二级经理副职)",
          value: "zhangzhiwei",
        },
        {
          label: "金鑫(二级经理副职)",
          value: "jinxin",
        },
        {
          label: "于洋(二级经理副职)",
          value: "yuyang01",
        },
      ],
      // 用来控制多选里的单选
      only: false,
      // 信息回显
      infolist: {},
      // 用户信息
      userInfo: {},
      buttonList: [
        "送部门人员审核",
        "送领导审核",
        "送申请人编号发送",
        "确认编号",
        "确认需求",
        "送项目经理会签",
        "送电商接口人阅办",
        "送其他人办理",
        "确认上线",
        "已办结",
        "打回",
      ],
      params: {},
      centerDialogVisible: false,
      messTit: "",
      delid: "",
      loading: false,
      loadinged: false,
      fileInfo: {
        limit: 5,
        url: "/bpm/api/upload",
        fileList: [],
      },
      rovaList: [],
      vision: "",
      datalist: {
        url: "/bpm/api/download",
        type: 1,
      },
      uploadstatus: false,
      mydisable: 1,
      opname: "",
      opno: "",
      attList: [],
      options: [],
      terminal: "729289304205336576",
      // terminal: '722743473704595456',//722743473704595456省722748981018685440
      remark: "",
      visionsts: "1",
      visionchonly: false,
      ifopt: [
        {
          id: 1,
          name: "是",
        },
        {
          id: 0,
          name: "否",
        },
      ],
      infodatas: [],
      busiTime: [],
      urgDegreeopt: [
        {
          id: 1,
          name: "正常",
        },
        {
          id: 2,
          name: "紧急",
        },
        {
          id: 3,
          name: "非常紧急",
        },
      ],
      demandTypeopt: [],
      carryChannelopt: [],
      treeList: [],
      treeListonly: {},
      defaultList: [],
      closeList: false,
      depttype: 0,
      fileInfoin: {
        type: "btn",
        typename: "导入",
        btntype: "primary",
        limit: 1,
        url: "/market/cChannelDemand/demandCarryImport",
        fileList: [],
      },
      tempSave: false,
    };
  },
  watch: {
    "datalist.attList"() {
      this.number++;
    },
    // tempSave(value) {
    //   if (value) {
    //     // 监听编辑状态，每20秒请求一次，注意函数不加（）
    //     this.timer = window.setInterval(this.temp, 20000);
    //   } else {
    //     // 停止监听
    //     clearInterval(this.timer);
    //   }
    // },
  },
  methods: {
    // 新的处理方法
    handlePreview(file) {
      console.log(file, "Preview");
    },
    handleRemove(file) {
      this.file = this.file.filter((el) => el.uid !== file.uid);
    },
    handleSuccess({ file }) {
      this.file.push(file);
    },
    handleMessage({ file }) {
      const workbook = new Excel.Workbook();
      // workbook.xlsx.readFile(file.path) // use path
      const Array = [];
      workbook.xlsx.load(file).then(async () => {
        const worksheet = await workbook.getWorksheet(1);
        worksheet.eachRow(({ values }) => {
          let obj = {
            factoryName: values[1],
            workLoad: values[2],
          };
          Array.push(obj);
        });
        if (
          this.infodatas.length === 1 &&
          !this.infodatas[0].factoryName &&
          !this.infodatas[0].workLoad
        ) {
          this.infodatas = Array;
        } else {
          this.infodatas.push(...Array);
        }
      });
    },
    handleApprove(type) {
      if (type === "取消") {
        this.dialogStatus = false;
        this.disableStatus = false;
        this.only = false;
        this.number++;
        this.infolist = {};
        return;
      }
      this.$refs.infolist.validate((val) => {
        if (val) {
          switch (type) {
            case "送部门人员审核":
              this.checkexa = true;
              this.type = "0";
              console.log("送部门人员审核");
              break;
            case "送领导审核":
              this.type = "1";
              // this.formSubmit()
              this.checkLaeder = true;
              console.log("送领导审核");
              break;
            case "送起草人编号发送":
              this.handleSendNo();
              break;
            case "确认编号":
              this.handleComfirmNo();
              break;
            case "打回":
              this.handleBackRecord();
              break;
            case "确认需求":
              this.checkexa = true;
              this.type = "0";
              this.operateName = "确认需求";
              break;
            case "送项目经理会签":
              this.checkexa = true;
              this.type = "0";
              this.operateName = "送项目经理会签";
              break;
            case "送电商接口人阅办":
              this.operateName = "送电商接口人阅办";
              this.handleDeliverReadOfficeOrOtherDo("1");
              break;
            case "送其他人办理":
              this.checkexa = true;
              this.only = true;
              this.operateName = "送其他人办理";
              break;
            case "确认上线":
              this.operateName = "确认上线";
              this.handleConfirmOnline("1");
              break;
            case "已办结":
              this.operateName = "已办结";
              this.handleConfirmOnline("2");
              break;
            case "保存":
              this.operateName = "保存";
              this.handleConfirmOnline("3");
              break;
          }
        }
      });
    },
    // 确认上线/已办结
    handleConfirmOnline(type) {
      let flag = 1;
      const factoryName = [];
      const workLoad = [];
      this.infodatas.forEach((el) => {
        // 判断条件
        if (el.factoryName && el.workLoad) {
          flag = flag * 1;
          factoryName.push(el.factoryName);
          workLoad.push(el.workLoad);
        } else {
          flag = flag * 0;
        }
      });
      if (flag) {
        let reqdata = {
          operateName: this.operateName,
          type,
          support: factoryName,
          workload: workLoad,
          woNo: this.woNo + "",
        };
        this.$http({
          url: "/market/mkOnlineChannel/confirmOnline",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: reqdata,
        }).then(({ data: { desc } }) => {
          console.log(desc);
          if (desc === "操作成功") {
            this.$message.success("操作成功");
            this.dialogStatus = false;
            this.handleInit();
          } else {
            this.$message.error("操作失败");
          }
        });
      } else {
        this.$message.error("请输入必要的信息");
      }
    },
    // 送电商接口人阅办或送其他人办理
    handleDeliverReadOfficeOrOtherDo(type) {
      console.log(this.operateName, type);
      let receiveId = [];
      let receiveName = [];
      // console.log(this.treeList);
      this.treeList.forEach((item) => {
        receiveId.push(item.loginNoStr);
        receiveName.push(item.label);
      });
      let reqdata = {
        operateName: this.operateName,
        type,
        reviewOpinion: this.operateName + "," + this.remark,
        woId: this.woNo + "",
      };
      if (type === "2") {
        reqdata = {
          ...reqdata,
          receiveId: receiveId.join(","),
          receiveName: receiveName.join(","),
        };
      }
      console.log(reqdata);
      this.$http({
        url: "/market/mkOnlineChannel/deliverReadOfficeOrOtherDo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: reqdata,
      }).then(({ data: { desc } }) => {
        console.log(desc);
        if (desc === "操作成功") {
          this.$message.success("操作成功");
          this.checkexa = false;
          this.dialogStatus = false;
          this.handleInit();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 电商接口人阅办---送项目经理会签
    handleCountersigned() {
      let receiveId = [];
      let receiveName = [];
      console.log(this.treeList);
      this.treeList.forEach((item) => {
        receiveId.push(item.loginNoStr);
        receiveName.push(item.label);
      });
      let reqdata = {
        operateName: this.operateName,
        receiveId: receiveId.join(","),
        receiveName: receiveName.join(","),
        reviewOpinion: this.operateName + "," + this.remark,
        woNo: this.woNo + "",
      };
      console.log(reqdata);

      this.$http({
        url: "/market/mkOnlineChannel/countersigned",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: reqdata,
      }).then(({ data: { desc } }) => {
        console.log(desc);
        if (desc === "操作成功") {
          this.$message.success("操作成功");
          this.checkexa = false;
          this.dialogStatus = false;
          this.handleInit();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 确认需求
    handleNeedyComfirm() {
      let receiveId = [];
      let receiveName = [];
      // console.log(this.treeList);
      this.treeList.forEach((item) => {
        receiveId.push(item.loginNoStr);
        receiveName.push(item.label);
      });
      let reqdata = {
        operateName: this.operateName,
        receiveId: receiveId.join(","),
        receiveName: receiveName.join(","),
        reviewOpinion: this.operateName + "," + this.remark,
        woNo: this.woNo + "",
      };
      console.log(reqdata);

      this.$http({
        url: "/market/mkOnlineChannel/confirmDemand",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: reqdata,
      }).then(({ data: { desc } }) => {
        console.log(desc);
        if (desc === "操作成功") {
          this.$message.success("操作成功");
          this.checkexa = false;
          this.dialogStatus = false;
          this.handleInit();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 打回方法
    handleBackRecord() {
      this.$http({
        url: "/market/mkOnlineChannel/backRecord",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params: {
          woNo: this.woNo,
          remark: this.remark,
        },
      }).then(({ data: { desc } }) => {
        console.log(desc);
        if (desc === "操作成功") {
          this.$message.success("操作成功");
          this.dialogStatus = false;
          this.handleInit();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 表单提交
    formSubmit(type) {
      if (type === 1) {
        if (!this.treeList.length) {
          this.$message.error("请选择审核人员");
          return;
        }
      } else {
        if (!this.leader) {
          this.$message.error("请选择审核领导");
          return;
        }
      }
      let request = 0;
      let formData = new FormData();
      let origin_params = {};
      if (this.infolist.woNo) {
        origin_params = {
          // 需求编号
          woNo: this.infolist.woNo,
          createId: this.infolist.createId,
          createName: this.infolist.createName,
          id: this.infolist.id,
        };
      }
      let params = {
        ...origin_params,
        // 需求名称
        demandName: this.infolist.demandName,
        // 紧急程度
        urgDegree: this.infolist.urgDegree,
        // 业务主题
        busiSubject: this.infolist.busiSubject,
        // 需求类别
        demandTypeCode: this.infolist.busiSubject,
        //承载渠道
        carryChannelCode: this.infolist.carryChannelCode.join(","),
        // 加载周期 起止
        busiStartTime: this.busiTime[0]
          ? this.$formatDate(this.busiTime[0], "YYYY-MM-DD HH:mm:ss")
          : "",
        busiEndTime: this.busiTime[1]
          ? this.$formatDate(this.busiTime[1], "YYYY-MM-DD HH:mm:ss")
          : "",
        // 需求背景
        demandBackground: this.infolist.demandBackground,
        // 需求描述
        demandDesc: this.infolist.demandDesc,
        // 审批说明
        remark: this.remark,
        // 审核人员
        loginNameList: this.treeList.length
          ? this.treeList.map((el) => {
              return el.label;
            })
          : [this.leader],
        loginNoList: this.treeList.length
          ? this.treeList.map((el) => {
              return el.loginNoStr;
            })
          : [this.leader],
        type: this.type,
        // fileList: this.file,
      };
      // 处理其他参数
      for (let key in params) {
        formData.append(key, params[key]);
      }
      // 这是处理文件的参数
      if (this.file.length) {
        this.file.forEach((el, index) => {
          if (el.constructor.name === "File") {
            formData.append(`file${index + 1}`, el);
          }
        });
      }
      if (this.operateName === "确认需求") {
        this.handleNeedyComfirm();
        return;
      }
      if (this.operateName === "送项目经理会签") {
        this.handleCountersigned();
        return;
      }
      if (this.operateName === "送其他人办理") {
        this.handleDeliverReadOfficeOrOtherDo("2");
        return;
      }
      request = 1;
      if (request) {
        this.$http({
          url: "/market/mkOnlineChannel/saveOrUpdate",
          method: "post",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: formData,
        }).then(({ data }) => {
          if (data && data.desc === "操作成功") {
            this.$message({
              type: "success",
              message: data.desc,
            });
            this.dialogStatus = false;
            this.disableStatus = false;
            this.checkexa = false;
            this.checkLaeder = false;
            this.leader = "";
            this.infolist = {};
            this.handleInit();
          }
        });
      }
    },
    // 送起草人编号发送
    handleSendNo() {
      this.$http({
        url: "/market/mkOnlineChannel/createDemandNo",
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
        params: {
          woNo: this.woNo,
        },
      }).then(({ data: { desc } }) => {
        console.log(desc);
        if (desc === "操作成功") {
          this.$message.success("操作成功");
          this.dialogStatus = false;
          this.handleInit();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 确认编号
    handleComfirmNo() {
      this.$http({
        url: "/market/mkOnlineChannel/confirmNumber",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { woNo: this.woNo + "" },
      }).then(({ data: { desc } }) => {
        console.log(desc);
        if (desc === "操作成功") {
          this.$message.success("操作成功");
          this.dialogStatus = false;
          this.handleInit();
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 初始化列表接口
    handleInit() {
      this.$http({
        url: "/market/mkOnlineChannel/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          page: this.page,
          pageSize: this.pageSize,
        },
      }).then(
        ({
          data: {
            body: { data },
          },
        }) => {
          this.tableData = data;
        }
      );
    },
    // 查看详情接口封装
    queryDetails(id) {
      this.$http({
        url: "/market/mkOnlineChannel/getMkOnlineChannelById",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: id,
      }).then(
        ({
          data: {
            body: { button, mkOnlineChannel },
          },
        }) => {
          this.buttonList = button;
          this.infolist = {
            ...mkOnlineChannel,
            carryChannelCode: mkOnlineChannel.carryChannelCode.split(","),
          };
          this.busiTime = [
            mkOnlineChannel.busiStartTime,
            mkOnlineChannel.busiEndTime,
          ];
          this.rovaList = mkOnlineChannel.logList;
          this.datalist = {
            ...this.datalist,
            attList: mkOnlineChannel.attList,
          };
          //表单编号
          this.woNo = mkOnlineChannel.woNo;
          // 步骤
          this.step = mkOnlineChannel.step;
          // 最后一步是否办结
          this.tableSatus = mkOnlineChannel.sts;
          this.dialogStatus = true;
          if (this.titname === "添加") {
            // 审批说明
            this.visionsts = "";
            this.disableStatus = false;
          } else {
            if (this.titname === "查看") {
              this.disableStatus = true;
              this.visionsts = "";
              // 数组回显
              this.infodatas = mkOnlineChannel.logList;
            } else {
              if (this.step === "0") {
                this.dialogStatus = false;
                return;
              }
              this.dialogStatus = true;
              if (this.step === "7") {
                if (mkOnlineChannel.sts === "4") {
                }
                this.vision = "信息补填";
                this.visionsts = "";
                this.infodatas = mkOnlineChannel.workloadAndsupport.length
                  ? mkOnlineChannel.workloadAndsupport.map((el) => ({
                      factoryName: el.support,
                      workLoad: el.workload,
                    }))
                  : [
                      {
                        factoryName: "",
                        workLoad: "",
                      },
                    ];
              } else {
                // 数组回显
                this.infodatas = mkOnlineChannel.logList;
                this.visionsts = "2";
              }
            }
          }
        }
      );
    },

    // 老方法
    temp() {
      if (JSON.stringify(this.infolist) == "{}") {
        return;
      }
      let params = {};
      params.infolist = this.infolist;
      params.fileList = [];
      params.attList = [];
      this.attList.forEach((item) => {
        let file = {
          id: item.fileCode,
          fileCode: item.fileCode,
          fileName: item.fileName,
          name: item.fileName,
        };
        params.fileList.push(file);
        params.attList.push(file);
      });
      this.$http({
        url: "/market/bpmTemp/temp",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          bpmType: "1",
          content: JSON.stringify(params),
        },
      }).then((res) => {
        //console.log(res)
      });
    },
    deletes(v) {
      // this.treeListonly = {};
      this.treeList = this.treeList.filter(
        (el) => el.loginNoStr !== v.loginNoStr
      );
      this.closeList = !this.closeList;
    },
    treeCheckonly(v) {
      this.treeList = v;
      // this.treeListonly = v;
    },
    choline(v, n) {
      if (v == 1) {
        this.infodatas.push({});
      } else {
        this.infodatas.splice(n.$index, 1);
      }
    },
    closedia() {
      this.infolist = {};
      this.attList = [];
      this.file = [];
      delete this.datalist.attList;
      this.fileInfo.fileList = [];
      this.dialogStatus = false;
      this.checkexa = false;
      this.only = false;
      this.busiTime = [];
    },
    //获取列表
    getList(v, n) {
      this.pageSize = n;
      let _this = this;
      this.loading = true;
      v.procName = "业务需求申请(地市公司),业务需求申请(省公司)";
      this.$http({
        url: "/bpm/api/queryToDoAndFinishTaskList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
        this.loading = false;
      });
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    //申请  // 打开弹出层
    dialogCheck(type, data) {
      // let infolist = Object.assign({}, n);
      this.vision = "";
      this.visionsts = "";
      if (type === 1) {
        this.titname = "查看";
        this.visionsts = "2";
        this.queryDetails(data.woNo);
      } else if (type === 2) {
        this.titname = "审批";
        this.visionsts = "2";
        this.queryDetails(data.woNo);
      } else if (type === 3) {
        this.titname = "添加";
        this.dialogStatus = true;
        this.visionchonly = false;
        this.disableStatus = false;
        // this.$http({
        //   url: "/market/bpmTemp/query",
        //   method: "post",
        //   headers: { "Content-Type": "application/json" },
        //   data: { bpmType: "1" },
        // }).then((res) => {
        //   if (res.data) {
        //     let content = JSON.parse(res.data.content);
        //     this.infolist = content.infolist;
        //     this.attList = content.attList;
        //     this.fileInfo.fileList = content.fileList;
        //   }
        //   // this.tempSave = true;
        // });
        // return;
      }
      // this.$http({
      //   url: "/bpm/api/taskInit",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: {
      //     woNo: n.woNo,
      //   },
      // }).then((res) => {
      //   // this.infolist = Object.assign({}, res.data);
      //   this.terminal = infolist.procId;
      //   this.opname = res.data.opName;
      //   this.opno = res.data.opNo;
      //   this.infolist = JSON.parse(res.data.params.terminalRes);
      //   res.data.params.fillList
      //     ? (this.infodatas = JSON.parse(res.data.params.fillList))
      //     : "";
      //   this.infolist.procId = infolist.procId;
      //   this.infolist.procVersion = infolist.procVersion;
      //   this.remark = infolist.remark;
      //   this.infolist.stepId = infolist.stepId;
      //   this.infolist.taskId = infolist.taskId;
      //   this.infolist.taskName = infolist.taskName;
      //   this.infolist.opName = infolist.opName;
      //   this.infolist.opNo = infolist.opNo;
      //   this.infolist.opTime = infolist.opTime;
      //   this.infolist.woNo = infolist.woNo;
      //   this.busiTime = [];
      //   this.busiTime[0] = this.infolist.busiStartTime;
      //   this.busiTime[1] = this.infolist.busiEndTime;
      //   this.visionchonly = false;
      //   if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName == "流程发起"
      //   ) {
      //     this.vision = "流程发起";
      //     if (this.titname == "审批") {
      //       this.disableStatus = false;
      //     }
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //     "科室主任初审"
      //   ) {
      //     this.vision = "科室主任初审";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //     "部门副主任复审"
      //   ) {
      //     this.vision = "部门副主任复审";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //       "主管副总终审" ||
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //       "部门副主任终审"
      //   ) {
      //     this.vision = "主管副总终审";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //     "需求预评估"
      //   ) {
      //     this.vision = "需求预评估";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //     "需求预评估初审"
      //   ) {
      //     this.vision = "需求预评估初审";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //     "需求预评估复审"
      //   ) {
      //     this.vision = "需求预评估复审";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName ==
      //     "渠道经理会签"
      //   ) {
      //     this.vision = "渠道经理会签";
      //     this.visionsts = "2";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName == "需求确认"
      //   ) {
      //     this.vision = "需求确认";
      //     this.visionsts = "3";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName == "上线管理"
      //   ) {
      //     this.vision = "上线管理";
      //     this.visionsts = "3";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName == "上线验证"
      //   ) {
      //     this.vision = "上线验证";
      //     this.visionsts = "3";
      //     this.visionchonly = true;
      //   } else if (
      //     res.data.taskList[res.data.taskList.length - 1].taskName == "信息补填"
      //   ) {
      //     this.vision = "信息补填";
      //     this.visionsts = "4";
      //   }
      //   this.datalist.attList = JSON.parse(res.data.params.attList);
      //   this.attList = [];
      //   this.fileInfo.fileList = [];
      //   this.datalist.attList.forEach((item) => {
      //     item.id = item.attchFileId;
      //     this.fileInfo.fileList.push({
      //       name: item.fileName,
      //       url: "",
      //       id: item.id,
      //       attchFileId: item.attchFileId,
      //       fileName: item.fileName,
      //     });
      //     this.attList.push({
      //       name: item.fileName,
      //       url: "",
      //       id: item.id,
      //       attchFileId: item.attchFileId,
      //       fileName: item.fileName,
      //     });
      //   });
      //   this.rovaList = res.data.taskList;
      //   this.uploadstatus = true;
      // });
    },
    //审批
    dialogCli(v) {
      this.dialogStatus = false;
      if (v === 3) {
        this.infolist = {};
        this.attList = [];
        this.fileInfo.fileList = [];
        this.checkexa = false;
        this.tempSave = false;
        return;
      }
      let _this = this;
      this.infolist.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD");
      if (v === 1) {
        let params = {
          dealType: "1",
          dealTypeDesc: "打回",
          procId: this.infolist.procId,
          procVersion: this.infolist.procVersion,
          remark: this.remark,
          stepId: this.infolist.stepId,
          taskId: this.infolist.taskId,
          taskName: this.infolist.taskName,
          opName: this.infolist.opName,
          opNo: this.opno,
          opTime: this.infolist.opTime,
          params: {
            procExeCondiVal: "不同意",
            terminalRes: JSON.stringify(this.infolist),
            assigneeNo: this.opno,
            assigneeName: this.opname,
          },
          woNo: this.infolist.woNo,
        };
        this.submitInfo("/bpm/api/submitTask", params);
      } else if (v === 2) {
        let param = {
          dealType: "0",
          dealTypeDesc: "提交",
          procId: this.infolist.procId,
          procVersion: this.infolist.procVersion,
          remark: this.remark,
          stepId: this.infolist.stepId,
          taskId: this.infolist.taskId,
          taskName: this.infolist.taskName,
          opName: this.infolist.opName,
          opNo: this.opno,
          opTime: this.infolist.opTime,
          params: {
            woType: this.infolist.woType,
            terminalRes: JSON.stringify(this.infolist),
          },
          woNo: this.infolist.woNo,
        };
        if (this.visionchonly) {
          param.params.assigneeNo = this.treeListonly.leaderAuditNo;
          param.params.assigneeName = this.treeListonly.leaderAuditName;
        }
        // if(this.vision == '科室主任初审'||this.vision == '部门副主任复审'){
        // 	this.$http({
        // 		url: "/sysmgr/csysuserinfo/queryUserListByLoginNoAndDuty",
        // 		method: "post",
        // 		headers: {
        // 			"Content-Type": "application/json",
        // 			"page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
        // 		},
        // 		data: {"duty":"7,12"},
        // 	}).then((res) => {
        // 		if(res.data.length == 0){
        // 			this.$message({
        // 				message: '暂无领导审批，发起失败！',
        // 				type: 'error'
        // 			});
        // 			return
        // 		}else{
        // 			param.params.assigneeNo=res.data[0].loginNoStr;
        // 			param.params.assigneeName=res.data[0].loginNameStr;
        // 			_this.submitInfo("/bpm/api/submitTask", param);
        // 			return
        // 		}
        // 	});
        // }else if(this.vision == '渠道经理会签'||this.vision == '上线管理'){
        // 	param.params.assigneeNo= this.opno;
        // 	param.params.assigneeName= this.opname;
        // 	this.submitInfo("/bpm/api/submitTask", param);
        // }
        if (this.vision == "信息补填") {
          param.params.fillList = JSON.stringify(this.infodatas);
          this.submitInfo("/bpm/api/submitTask", param);
        } else {
          if (this.vision == "流程发起") {
            let attList = [];
            for (let i = 0; i < this.attList.length; i++) {
              attList.push({
                id: this.attList[i].id,
                fileCode: this.attList[i].fileCode,
                fileName: this.attList[i].fileName,
                opName: this.attList[i].opName,
                opNo: this.attList[i].opNo,
                opTime: this.attList[i].opTime,
                woNo: this.infolist.woNo,
                attchFileId: this.attList[i].attchFileId,
              });
            }
            param.params.attList = JSON.stringify(attList);

            this.$http({
              url: "/market/bpmTemp/del",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                bpmType: "1",
              },
            }).then((res) => {
              //console.log(res)
            });
          }
          this.submitInfo("/bpm/api/submitTask", param);
        }
      }
      this.checkexa = false;
    },
    //添加
    dialogCliadd(v) {
      let _this = this;
      let info = {};
      info.params = {};
      info.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD");
      info.opNo = this.userInfo.loginNo;
      info.opName = this.userInfo.loginName;
      info.woTitle = this.infolist.demandName;
      info.params.terminalRes = this.infolist;
      info.params.terminalRes.busiStartTime = this.busiTime[0]
        ? _this.$formatDate(this.busiTime[0], "YYYY-MM-DD")
        : "";
      info.params.terminalRes.busiEndTime = this.busiTime[1]
        ? _this.$formatDate(this.busiTime[1], "YYYY-MM-DD")
        : "";
      info.procId = this.terminal;
      info.params.assigneeNo = this.treeListonly.leaderAuditNo;
      info.params.assigneeName = this.treeListonly.leaderAuditName;
      for (let i = 0; i < this.options.length; i++) {
        if (this.terminal == this.options[i].procId) {
          info.procName = this.options[i].procName;
          info.procVersion = this.options[i].procVersion;
        }
      }
      let attList = [];
      for (let i = 0; i < this.attList.length; i++) {
        attList.push({
          id: this.attList[i].id,
          fileCode: this.attList[i].fileCode,
          fileName: this.attList[i].fileName,
          opName: this.attList[i].opName,
          opNo: this.attList[i].opNo,
          opTime: this.attList[i].opTime,
          woNo: this.infolist.woNo,
          attchFileId: this.attList[i].attchFileId,
        });
      }
      let fillList = [{}, {}];
      info.params.fillList = JSON.stringify(fillList);
      info.params.attList = JSON.stringify(attList);
      info.params.terminalRes = JSON.stringify(info.params.terminalRes);
      this.checkexa = false;
      this.visionchonly = false;
      this.submitInfo("/bpm/api/startProc", info);
    },

    submitInfo(u, v) {
      let _this = this;
      this.$refs.infolist.validate((valid) => {
        if (valid) {
          this.$http({
            url: u,
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: v,
          }).then((res) => {
            if (res.data.result === 1) {
              _this.$message({
                message: res.data.desc,
                type: "error",
              });
            } else {
              _this.$message({
                message: "成功",
                type: "success",
              });
              _this.closedia();
              _this.infolist = {};
              _this.attList = [];
              _this.fileInfo.fileList = [];
              _this.getList(this.params, this.pageSize);
            }
          });
        }
      });
    },
    getStanding() {
      this.$router.push({
        path: "/ywStanding",
      });
      this.setabList("线上业务需求台账", "/ywStanding");
    },
    setabList(n, p) {
      let params = {
        children: "",
        name: n,
        rountPath: p,
        target: "_self",
      };
      for (let i = 0; i < this.$store.state.tabList.length; i++) {
        if (this.$store.state.tabList[i].name === params.name) {
          this.$store.state.tabList[i] = params;
        }
      }
      let set = new Set([...this.$store.state.tabList, params]);
      set.add(params);
      this.$store.commit("setDefaultActive", params.rountPath);
      this.$store.commit("setTabList", Array.from(set));
    },
    //流程
    getTermianl() {
      this.$http({
        url: "/bpm/api/queryBpmProcList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + 1 + '","pageSize":"100"}',
        },
        data: {},
      }).then((res) => {
        this.options = res.data.data;
      });
    },
    closeMessage(v) {
      this.centerDialogVisible = false;
      let _this = this;
      if (v === 1) {
        _this
          .$http({
            url: "/bpm/api/deleteBpmPrePlugin",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              id: this.delid,
            },
          })
          .then((res) => {
            if (res.data.result === 1) {
              _this.$message({
                message: res.data.desc,
                type: "error",
              });
            } else {
              _this.$message({
                message: "删除成功",
                type: "success",
              });
              _this.getList(this.params, this.pageSize);
            }
          });
      }
    },
    //删除
    delLine(v) {
      this.centerDialogVisible = true;
      this.messTit = "即将删除此条数据, 是否删除?";
      this.delid = v.id;
    },
    //文件返回值
    uploadBack(v) {
      this.attList = v;
    },
    uploadBackin(v) {
      console.log(v, "v");
      let x = [];
      for (let i = 1; i < v.data.body.length; i++) {
        x.push({
          factoryName: v.data.body[i].factoryName,
          workLoad: v.data.body[i].workLoad,
        });
      }
      this.infodatas = x;
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.handleInit();
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    getUser() {
      this.userInfo = JSON.parse(window.sessionStorage.userInfo);
    },
    // 字典
    // 需求类别 demandType
    // 承载渠道 demandChnl
    getsaleChnl() {
      this.$http({
        url: "/market/cfgDataDict/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCode: "demandType",
        },
      }).then((res) => {
        this.demandTypeopt = res.data;
      });
      this.$http({
        url: "/market/cfgDataDict/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCode: "demandChnl",
        },
      }).then((res) => {
        this.carryChannelopt = res.data;
      });
    },
  },
  mounted() {
    // 调用初始化接口
    this.handleInit();
    // this.getList({}, 1);
    this.getUser();
    this.getTermianl();
    this.getsaleChnl();
  },
  created() {},
};
</script>
<style scoped lang="scss">
.onetab {
  margin-bottom: 20px;
  padding: 0 20px;
}
.simple-dialog {
  position: relative;
  min-height: 90vh;
}
.info {
  &-footer {
    display: flex;
    margin-top: 50px;
    justify-content: flex-end;
    margin-bottom: 50px;
  }
  &-upload {
    width: 500px !important;
  }
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}
.upload {
  position: relative;
  left: calc(50% - 229px / 2);
  vertical-align: middle;
  display: flex !important;
  flex-direction: column;
}
.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
  }
  span {
    width: 100px;
    display: inline-block;
    text-align: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 120px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 120px);
  }

  .tree {
    width: calc(50% - 60px);
    display: inline-block;
    margin-right: 20px;
    height: 300px;
    overflow-y: scroll;

    .el-icon-error {
      float: right;
      font-size: 20px;
      margin-top: 9px;
      cursor: pointer;
    }
  }

  .treeUser {
    margin: 0;
    border: 1px solid #ddd;

    p {
      background: #f4f4f4;
      padding: 0 20px;
      border-bottom: 1px solid #fff;
    }
  }
  .treeUserb {
    width: calc(100% - 100px);
    border: 1px solid #ddd;
    background: #f4f4f4;
    border-radius: 3px;
    height: auto;
    overflow: hidden;

    p {
      display: inline-block;
      padding: 0 20px;
      // margin-bottom: 5px;
    }
  }
}

.adv-type {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  div {
    width: 33%;
    text-align: center;
    height: 80px;
    overflow: hidden;
    min-width: 100px;
    cursor: pointer;
    padding-top: 10px;
    margin: 10px 0;
  }

  div:hover {
    background: #cfe8fc;
    border-radius: 5px;
  }

  span {
    width: 100%;
    display: inline-block;
    height: 40px;

    // line-height: 40px;
    i {
      color: #0074d9;
      font-size: 36px;
    }
  }
}
</style>