storevisit-ui-mobile/src/views/week/componVisitSummary.vue

<template>
  <div class="componVisitSummary">
    <slot></slot>
    <van-form ref="tabstoreVal" v-if="collectionItemList">
      <div v-for="(item, index) in collectionItemList" :key="index">
        <div v-if="item.answerType == 'sz'" class="formLabel z-cell">
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-field
            v-model="item.answerValue"
            :placeholder="item.remark"
            type="number"
            @input="numberFn(item, index)"
          ></van-field>
          <!-- <p style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right">
            {{ item.remark }}
          </p> -->
        </div>
        <div v-if="item.answerType == 'rq'" class="formLabel z-cell">
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-field
            v-model="item.answerValue"
            clickable
            name="calendar"
            placeholder="点击选择日期"
            readonly
            @click="showCalendarClick(index)"
          />
          <p
            style="
              color: #444;
              font-size: 12px;
              margin: 0;
              padding: 10px 0;
              text-align: right;
            "
          >
            {{ item.remark }}
          </p>
        </div>
        <div v-if="item.answerType == 'zp'" class="formLabel z-cell">
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-row gutter="10" style="margin-bottom: 10px">
            <p style="margin-top: 0">
              <span style="font-size: 12px; color: #888">{{
                item.remark
              }}</span>
            </p>
            <delete-upload-img
              :isDelete="false"
              :imgs="item.fileInfoList"
            ></delete-upload-img>
            <upload-img
              :uploadid="uploadid2"
              @newimgarr="newimgarr1"
              imgText="上传照片"
              :indexImg="index"
              :customId="item.customId"
              :summaryId="item.summaryId"
              :item="item"
              @click="imgClick(item, index)"
            ></upload-img>
          </van-row>
        </div>
        <div v-if="item.answerType == 'wb'" class="formLabel z-cell">
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-field
            v-model="item.answerValue"
            :formatter="formatter"
            autosize
            type="textarea"
            :placeholder="item.remark"
          ></van-field>
          <!-- <p style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right">
            {{ item.remark }}
          </p> -->
        </div>
        <div
          v-if="item.answerType == 'gs'"
          class="formLabel z-cell"
          @click="regionClick(index)"
        >
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-field
            readonly
            v-model="item.answerName"
            :formatter="formatter"
            :placeholder="item.customName"
          ></van-field>
          <p
            style="
              color: #444;
              font-size: 12px;
              margin: 0;
              padding: 10px 0;
              text-align: right;
            "
          >
            {{ item.remark }}
          </p>
        </div>
        <div
          v-if="item.answerType == 'dq'"
          class="formLabel z-cell"
          @click="SalesRegionClick(index)"
        >
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-field
            readonly
            v-model="item.answerName"
            :formatter="formatter"
            :placeholder="item.customName"
          ></van-field>
          <p
            style="
              color: #444;
              font-size: 12px;
              margin: 0;
              padding: 10px 0;
              text-align: right;
            "
          >
            {{ item.remark }}
          </p>
        </div>
        <div
          v-if="item.answerType == 'xsb'"
          class="formLabel z-cell"
          @click="SalesDepartmentClick(index)"
        >
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <van-field
            readonly
            v-model="item.answerName"
            :formatter="formatter"
            :placeholder="item.customName"
          ></van-field>
          <p
            style="
              color: #444;
              font-size: 12px;
              margin: 0;
              padding: 10px 0;
              text-align: right;
            "
          >
            {{ item.remark }}
          </p>
        </div>
        <div v-if="item.answerType == 'duox'" class="formLabel z-cell">
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <z-checkbox
            :answerType="item.answerType"
            :checkboxval="item.answerValue"
            :collectionType="item.customOptionList"
            :textc="item.customId"
            :zCheckboxcolumns="item.customOptionList"
            @zSelectVal="zSelectVal"
          ></z-checkbox>
        </div>
        <div v-if="item.answerType == 'dx'" class="formLabel z-cell">
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <z-radio
            :answerType="item.answerType"
            :collectionType="item.collectionType"
            :radio="item.answerValue"
            :textc="item.customId"
            :zRadiocolumns="item.customOptionList"
            @zSelectVal="zSelectVal"
          ></z-radio>
        </div>
        <div
          v-if="item.answerType == 'jxs' || item.answerType == 'md'"
          class="formLabel z-cell"
        >
          <van-cell>
            <template #title>
              <span v-if="item.isMust == 0" class="van-f-red">*</span>
              {{ 1 + index + "." }}
              {{ item.customName }}
            </template>
          </van-cell>
          <div class="jxsBox">
            <div class="jxsContent" v-if="item.answerType == 'jxs'">
              <div
                class="item"
                v-for="(val, index) in item.chainList"
                :key="index"
              >
                <el-popover
                  placement="bottom"
                  trigger="click"
                  :content="val.chainName + '(' + val.chainCode + ')'"
                >
                  <template slot="reference">
                    <div class="selectItem">
                      {{ val.chainName }} &nbsp; ({{ val.chainCode }})
                    </div>
                    <van-icon
                      name="clear"
                      size="16"
                      @click="closeJXSorMD(item, index)"
                    />
                  </template>
                </el-popover>
              </div>
            </div>
            <div class="jxsContent" v-if="item.answerType == 'md'">
              <div
                class="item"
                v-for="(val, index) in item.storeList"
                :key="index"
              >
                <el-popover
                  placement="bottom"
                  trigger="click"
                  :content="val.storeName + '(' + val.storeCode + ')'"
                >
                  <template slot="reference">
                    <div class="selectItem">
                      {{ val.storeName }} &nbsp; ({{ val.storeCode }})
                    </div>
                    <van-icon
                      name="clear"
                      size="16"
                      @click="closeJXSorMD(item, index)"
                    />
                  </template>
                </el-popover>
              </div>
            </div>
            <div class="addJXS">
              <van-icon name="add-o" size="24" @click="addJXSorMD(item)" />
            </div>
            <div class="tips">{{ item.remark }}</div>
          </div>
          <br />
        </div>
      </div>
    </van-form>
    <van-calendar
      v-model="showCalendar"
      @confirm="onConfirm"
      color="#0057ba"
      :min-date="minDate"
      :max-date="maxDate"
      :show-confirm="false"
    />
    <van-popup v-model="RegionShow" capture position="bottom">
      <van-picker
        :columns="companyList"
        show-toolbar
        value-key="deptName"
        @cancel="RegionShow = false"
        @confirm="onregionConfirm"
      />
    </van-popup>
    <van-popup v-model="SalesRegionShow" capture position="bottom">
      <van-picker
        :columns="regionList"
        show-toolbar
        value-key="deptName"
        @cancel="SalesRegionShow = false"
        @confirm="onSalesRegionConfirm"
      />
    </van-popup>
    <van-popup v-model="SalesDepartmentShow" capture position="bottom">
      <van-picker
        :columns="deptList"
        show-toolbar
        value-key="deptName"
        @cancel="SalesDepartmentShow = false"
        @confirm="onSalesDepartmentConfirm"
      />
    </van-popup>
    <van-popup v-model="StartTimeShow" capture position="bottom">
      <van-datetime-picker
        v-model="strtcurrentDate"
        :max-date="strtmaxDate"
        :min-date="strtminDate"
        title="选择查找开始时间"
        type="date"
        @cancel="StartTimeShow = false"
        @confirm="onStartTimeConfirm"
      />
    </van-popup>
    <van-popup v-model="EndTimeShow" capture position="bottom">
      <van-datetime-picker
        v-model="endcurrentDate"
        :max-date="endmaxDate"
        :min-date="endminDate"
        title="选择查找结束时间"
        type="date"
        @cancel="EndTimeShow = false"
        @confirm="onEndTimeConfirm"
      />
    </van-popup>
    <!-- 经销商 -->
    <van-popup v-model="moreTypeShow" position="bottom">
      <van-row style="background-color: #f5f5f5">
        <van-col span="20">
          <van-field
            left-icon="search"
            style="margin-top: 2px; border-radius: 6px; overflow: hidden"
            v-model="agentValue"
            label=""
            placeholder="请输入关键词"
            clearable
          />
        </van-col>
        <van-col
          span="4"
          style="text-align: center; line-height: 48px"
          @click="getChainsList(agentValue)"
        >
          <div style="background-color: #0057ba; color: #fff">搜索</div>
        </van-col>
      </van-row>
      <div class="tips">
        <div><van-icon name="warning-o" />默认显示前100条，请输入关键词查询</div>
      </div>
      <van-picker
        show-toolbar
        :columns="chainsData"
        value-key="chainName"
        @confirm="onConfirmChainsList"
        @cancel="moreTypeShow = false"
      />
    </van-popup>
    <!-- 门店 -->
    <van-popup v-model="storeTypeShow" position="bottom">
      <van-row style="background-color: #f5f5f5">
        <van-col span="20">
          <van-field
            left-icon="search"
            style="margin-top: 2px; border-radius: 6px; overflow: hidden"
            v-model="agentValue"
            label=""
            placeholder="请输入关键词"
            clearable
          />
        </van-col>
        <van-col
          span="4"
          style="text-align: center; line-height: 48px"
          @click="getStoresList(agentValue)"
        >
          <div style="background-color: #0057ba; color: #fff">搜索</div>
        </van-col>
      </van-row>
      <!-- <div class="tips">
        <div><van-icon name="warning-o" />默认显示前100条，请输入关键词查询</div>
      </div> -->
      <van-picker
        show-toolbar
        :columns="storesData"
        value-key="storeName"
        @confirm="onConfirmStoresList"
        @cancel="storeTypeShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  insertCustomAnswer,
  getSummaryMobileDeptInfo,
  getDeptsByUser,
  chainsList,
  storesList,
} from "@/api/index";
import zRadio from "@/components/zRadio2";
import zCheckbox from "@/components/zCheckbox2";
import uploadImg from "@/components/uploadVTask";
import deleteUploadImg from "@/components/deleteUploadImg2";

export default {
  name: "componVisitSummary",
  components: { zRadio, zCheckbox, uploadImg, deleteUploadImg },
  props: {
    collectionItemLists: {
      type: Array,
      default() {
        return [];
      },
    },
    approvalStatus: {
      type: String,
      default: "",
    },
    source: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      RegionShow: false,
      SalesRegionShow: false,
      SalesDepartmentShow: false,
      StaffShow: false,
      StartTimeShow: false,
      dateIndex: "",
      EndTimeShow: false,
      uploadid2: "uploadid2",
      PhotoTypeList: [{ text: "009", value: "09" }],
      strtminDate: new Date(2022, 0, 1),
      endminDate: new Date(2022, 0, 1),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2090, 0, 31),
      strtmaxDate: new Date(),
      endmaxDate: new Date(),
      strtcurrentDate: new Date(),
      endcurrentDate: new Date(),
      companyName: "全部公司",
      deptName: "全部销售部",
      regionName: "全部大区",
      userName: "全部",
      companyCode: "",
      deptCode: "",
      regionCode: "",
      userCode: "",
      companyList: [],
      title: "",
      deptList: [],
      regionList: [],
      userList: [],
      deptForm: { type: "", parentId: "" },
      list: [],
      loading: false,
      finished: true,
      showCalendar: false,
      formData: {
        type: "2", // 汇报类型或入口 1-下属业务员日报 2-下属销售部主管周报 3-下属大区主管半月报
        companyId: "", // 公司id，必传 Long类型
        regionId: "", // 大区id，必传  Long类型
        deptId: "", // 部门id，如果为周报或日报为必传  Long类型
        userId: "", // 业务员id，如果为日报为必传      Long类型
        startTime: "", // 开始时间，必传  格式：yyyy-MM-dd  String类型
        endTime: "", // 结束时间，必传  格式：yyyy-MM-dd  String类型
        pageNum: 1, // 当前页码  int类型
        pageSize: 10, // 当前每页条数  int类型
      },
      tableList: [],
      collectionItemList: [],
      collectionAnswerlisd: [],
      flagclick: true,
      index: "",
      activaFlag: true,
      moreTypeShow: false,
      storeTypeShow: false,
      storeType: null,
      agentValue: "",
      chainsData: [],
      storesData: [],
      chainName: "",
      chainCode: "",
      jxsList: [],
    };
  },
  created() {
    this.formData.startTime = this.getThreeDaysAgo();
    this.strtcurrentDate = new Date(this.getThreeDaysAgo());
    this.formData.endTime = this.parseTime(new Date(), "{y}-{m}-{d}") + "";
    this.endminDate = new Date(
      this.GetPreMonthDay(this.parseTime(new Date(), "{y}-{m}-{d}"), 2)
    );
    this.powerGrade = localStorage.getItem("powerGrade");
    this.title = this.$route.query.title;
    this.regionCode = "";
  },
  watch: {
    collectionItemLists: {
      handler(val) {
        // this.collectionItemList = JSON.parse(JSON.stringify(this.collectionItemLists));
        this.setCollectionItemLists();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    showCalendarClick(val) {
      this.dateIndex = val;
      this.showCalendar = true;
    },
    formatDate(date) {
      var Month = date.getMonth() + 1;
      var Day = date.getDate();
      if (Month < 10) {
        Month = "0" + Month;
      }
      if (Day < 10) {
        Day = "0" + Day;
      }
      return `${date.getFullYear()}-${Month}-${Day}`;
    },
    onConfirm(date) {
      this.showCalendar = false;
      this.collectionItemList[this.dateIndex].answerValue =
        this.formatDate(date);
    },
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        ""
      );
    },
    numberFn(val, index) {
      if (this.collectionItemList[index].answerName) {
        if (
          !/^[+-]?\d*\.{0,1}\d{0,1}$/.test(
            this.collectionItemList[index].answerName
          )
        ) {
          this.collectionItemList[index].answerName = this.collectionItemList[
            index
          ].answerName.replace(
            /\.\d{2,}$/,
            this.collectionItemList[index].answerName.substr(
              this.collectionItemList[index].answerName.indexOf("."),
              3
            )
          );
        }
      }
    },
    zSelectVal(value) {
      console.log(value);
      var collectionAnswerlisd = this.collectionAnswerlisd;
      if (collectionAnswerlisd.length > 0) {
        var num = 0;
        for (var a = 0; a < collectionAnswerlisd.length; a++) {
          if (collectionAnswerlisd[a].id == value.id) {
            collectionAnswerlisd[a] = value;
            num = 0;
          } else {
            num = 1;
          }
        }
        if (num > 0) {
          collectionAnswerlisd.push(value);
        }
      } else {
        collectionAnswerlisd.push(value);
      }
      this.collectionAnswerlisd = collectionAnswerlisd;
    },
    imgClick(val, index) {
      this.collectionId = val.collectionId + "";
      this.indeximg = index;
      this.show = true;
    },
    newimgarr1() {
      this.$forceUpdate();
    },
    dateFn(val) {
      return val.slice(0, 4) + "-" + val.slice(4, 6) + "-" + val.slice(6, 8);
    },
    onLoad() {},
    onSubmit() {
      for (var c = 0; c < this.collectionAnswerlisd.length; c++) {
        for (var b = 0; b < this.collectionItemList.length; b++) {
          if (
            this.collectionAnswerlisd[c].id ==
            this.collectionItemList[b].customId
          ) {
            this.collectionItemList[b].customOptionList =
              this.collectionAnswerlisd[c].value;
          }
        }
      }
      if (this.flagclick) {
        this.flagclick = false;
        this.timer = null;
        this.timer = setTimeout(() => {
          this.flagclick = true;
        }, 2000);
        insertCustomAnswer(this.collectionItemList).then((res) => {
          if (res.code == 200) {
            this.$router.go(-1);
          }
        });
      }
    },
    setCollectionItemLists() {
      this.collectionItemList = [];
      this.collectionAnswerlisd = [];
      this.collectionItemList = JSON.parse(
        JSON.stringify(this.collectionItemLists)
      );
      for (var q = 0; q < this.collectionItemList.length; q++) {
        // 公司
        if (
          (this.collectionItemList[q].answerType == "gs" ||
            this.collectionItemList[q].answerType == "dq" ||
            this.collectionItemList[q].answerType == "xsb") &&
          this.activaFlag
        ) {
          this.activaFlag = false;
          if (this.collectionItemList[q].answerType == "xsb") {
            this.getDeptsBy(this.collectionItemList[q].answerName);
            this.getDeptInfo(
              "dept",
              this.collectionItemList[q].answerType,
              this.collectionItemList[q].answerName
            );
          } else {
            this.getDeptInfo(
              "dept",
              this.collectionItemList[q].answerType,
              this.collectionItemList[q].answerName
            );
          }
        }
        // 单选
        if (this.collectionItemList[q].answerType == "dx") {
          let findCustom = this.collectionItemList[q].customOptionList.find(
            (item) => item.checked
          );
          if (findCustom) {
            this.collectionItemList[q].answerValue =
              findCustom.customOptionId + "";
          }
        }
        // 多选
        if (this.collectionItemList[q].answerType == "duox") {
          let findCustom = [];
          this.collectionItemList[q].customOptionList.forEach((item) => {
            if (item.checked) {
              findCustom.push(item.customOptionId + "");
            }
          });
          if (findCustom) {
            this.collectionItemList[q].answerValue = findCustom.join(",");
          }
        }
        // 照片
        if (
          this.collectionItemList[q].answerType == "zp" &&
          this.collectionItemList[q].fileInfoList
        ) {
          let fileIdList = [];
          this.collectionItemList[q].fileInfoList.forEach((item) => {
            fileIdList.push(item.id);
          });
          this.collectionItemList[q].fileIdList = fileIdList;
        }
      }
    },
    getThreeDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 14); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return startData;
    },
    GetPreMonthDay(date, monthNum, type) {
      var dateArr = date.split("-");
      var year = dateArr[0]; //获取当前日期的年份
      var month = dateArr[1]; //获取当前日期的月份
      var day = dateArr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - monthNum;
      if (month2 <= 0) {
        var absM = Math.abs(month2);
        year2 =
          parseInt(year2) - Math.ceil(absM / 12 == 0 ? 1 : parseInt(absM) / 12);
        month2 = 12 - (absM % 12);
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      var t2 = "";
      if (monthNum > 0) {
        t2 = year2 + "-" + month2 + "-01";
      } else {
        if (type == "end") {
          var Months = new Date().getMonth() + 1;
          var days111 = new Date().getDate();
          if (Months < 10) {
            Months = "0" + Months;
          }
          if (days111 < 10) {
            days111 = "0" + days111;
          }
          if (parseInt(month2) >= new Date().getMonth() + 1) {
            t2 = year2 + "-" + Months + "-" + days111;
          } else {
            var daysd = this.getMonthDays(year2, month2);
            t2 = year2 + "-" + month2 + "-" + daysd;
          }
        } else {
          t2 = year2 + "-" + month2 + "-" + day2;
        }
      }
      return t2;
    },
    getMonthDays(year, month) {
      var stratDate = new Date(year, month - 1, 1),
        endData = new Date(year, month, 1);
      var days = (endData - stratDate) / (1000 * 60 * 60 * 24);
      return days;
    },
    getDeptInfo(type, grade, answerName) {
      this.deptForm.type = type;
      if (grade == "dq") {
        this.deptForm.parentId = this.companyCode;
      } else if (grade == "xsb") {
        this.deptForm.parentId = this.regionCode;
      } else {
        this.deptForm.type = "";
        this.deptForm.parentId = "";
      }
      getSummaryMobileDeptInfo(this.deptForm).then((res) => {
        if (grade == "dq") {
          if (res.data.region != null) {
            this.regionList = res.data.region;
            if (answerName) {
              let findCompany = this.companyList.find(
                (item) => item.deptName == answerName
              );
              // this.onSalesRegionConfirm(findCompany);
            } else {
              this.onSalesRegionConfirm(this.regionList[0]);
            }
          }
        } else if (grade == "xsb") {
          if (res.data.dept != null) {
            this.deptList = res.data.dept;
            if (answerName) {
              let findCompany = this.regionList.find(
                (item) => item.deptName == answerName
              );
              // this.onSalesDepartmentConfirm(findCompany);
            } else {
              this.onSalesDepartmentConfirm(this.deptList[0]);
            }
          }
        } else if (grade == "gs") {
          this.companyList = res.data.company;
          if (answerName) {
            let findCompany = this.companyList.find(
              (item) => item.deptName == answerName
            );
            // this.onregionConfirm(findCompany);
          } else {
            this.onregionConfirm(this.companyList[0]);
          }
          if (res.data.dept != null) {
            this.deptList = res.data.dept;
          }
          if (res.data.region != null) {
            this.regionList = res.data.region;
          }
        }
      });
    },
    getDeptsBy(answerName) {
      getDeptsByUser().then((res) => {
        if (res.data && res.code == 200) {
          let arr = [];
          res.data.forEach((val) => {
            arr.push({
              ancestors: val.ancestors || "",
              deptCode: val.deptCode || "",
              deptId: val.deptId || "",
              deptLevel: val.deptLevel || "",
              deptName: val.deptName || "",
              parentId: val.parentId || "",
            });
          });
          this.deptList = arr;
          if (answerName) {
            let findCompany = this.regionList.find(
              (item) => item.deptCode == answerName
            );
            // this.onSalesDepartmentConfirm(findCompany);
          } else {
            this.onSalesDepartmentConfirm(this.deptList[0]);
          }
        }
      });
    },
    dailyFn(row) {
      if (row.status != "0") {
        if (row.status == -1) {
          var dayTime = row.showDate;
          var times = new Date(
            dayTime.slice(0, 4) +
              "-" +
              dayTime.slice(4, 6) +
              "-" +
              dayTime.slice(6, 8)
          ).getTime();
          var time = new Date("2022-08-25").getTime();
          if (times < time) {
            this.$dialog.alert({
              title: "系统提示",
              message: "非常抱歉，8月25日前历史报告数据不存在",
            });
          } else {
            this.$router.push({
              path: "/weeklyHistoricalDetils",
              query: { reportId: row.id },
            });
          }
        } else {
          this.$router.push({
            path: "/weeklyHistoricalDetils",
            query: { reportId: row.id },
          });
        }
      }
    },
    regionClick(val) {
      // if(this.powerGrade>4){
      this.index = val;
      this.RegionShow = true;
      // }
    },
    SalesRegionClick(val) {
      this.index = val;
      this.SalesRegionShow = true;
    },
    SalesDepartmentClick(val) {
      this.index = val;
      this.SalesDepartmentShow = true;
    },
    StaffClick() {
      this.StaffShow = true;
    },
    StartTimeClick() {
      this.StartTimeShow = true;
    },
    EndTimeClick() {
      this.EndTimeShow = true;
    },
    onSalesRegionConfirm(val) {
      this.SalesRegionShow = false;
      this.regionCode = val.deptId;
      for (var k1 = 0; k1 < this.collectionItemList.length; k1++) {
        if (this.collectionItemList[k1].answerType == "xsb") {
          this.collectionItemList[k1].answerName = "";
          this.collectionItemList[k1].answerValue = "";
        }
        if (this.collectionItemList[k1].answerType == "dq") {
          this.collectionItemList[k1].answerName = val.deptName;
          this.collectionItemList[k1].answerValue = val.deptCode;
        }
        if (
          this.collectionItemList[k1].answerType == "xsb" &&
          val.deptId != ""
        ) {
          this.getDeptInfo("dept", "xsb");
        }
      }
    },
    onregionConfirm(val) {
      this.RegionShow = false;
      this.companyCode = val.deptId;
      for (var k1 = 0; k1 < this.collectionItemList.length; k1++) {
        if (this.collectionItemList[k1].answerType == "xsb") {
          this.collectionItemList[k1].answerName = "";
          this.collectionItemList[k1].answerValue = "";
        }
        if (this.collectionItemList[k1].answerType == "xsb") {
          this.collectionItemList[k1].answerName = "";
          this.collectionItemList[k1].answerValue = "";
        }
        if (this.collectionItemList[k1].answerType == "gs") {
          this.collectionItemList[k1].answerName = val.deptName;
          this.collectionItemList[k1].answerValue = val.deptCode;
        }
        if (this.collectionItemList[k1].answerType == "dq") {
          this.getDeptInfo("dept", "dq");
        }
      }
    },
    onSalesDepartmentConfirm(val) {
      this.SalesDepartmentShow = false;
      for (var k1 = 0; k1 < this.collectionItemList.length; k1++) {
        if (this.collectionItemList[k1].answerType == "xsb") {
          this.collectionItemList[k1].answerName = val.deptName;
          this.collectionItemList[k1].answerValue = val.deptCode;
        }
      }
    },
    onStartTimeConfirm(val) {
      this.formData.startTime =
        this.parseTime(new Date(val), "{y}-{m}-{d}") + "";
      this.StartTimeShow = false;
      this.endminDate = new Date(val);
      this.endmaxDate = new Date(
        this.GetPreMonthDay(this.formData.startTime, -2, "end")
      );
      if (
        new Date(this.formData.startTime).getTime() >
          new Date(this.formData.endTime).getTime() ||
        new Date(this.endmaxDate).getTime() <
          new Date(this.formData.endTime).getTime()
      ) {
        this.formData.endTime =
          this.parseTime(new Date(val), "{y}-{m}-{d}") + "";
        this.endcurrentDate = this.GetPreMonthDay(this.formData.startTime, -2);
      }
      this.list = [];
      this.formData.pageNum = 1;
    },
    onEndTimeConfirm(val) {
      this.formData.endTime = this.parseTime(new Date(val), "{y}-{m}-{d}");
      this.strtmaxDate = new Date(val);
      if (
        new Date(this.formData.startTime).getTime() >
        new Date(this.formData.endTime).getTime()
      ) {
        this.formData.startTime = this.formData.endTime;
      }
      this.list = [];
      this.formData.pageNum = 1;
      this.EndTimeShow = false;
    },
    // 添加经销商或者门店
    addJXSorMD(val) {
      let answerType = val.answerType;
      let dataList = [];
      if (answerType == "jxs") {
        dataList = val.chainList ? val.chainList : [];
      } else if (answerType == "md") {
        dataList = val.storeList ? val.storeList : [];
      }
      const isExceedLimit = dataList.length >= val.maxValue;
      if (val.maxValue !== null && isExceedLimit) {
        this.$toast("超过最大限制！");
      } else {
        this.agentValue = "";
        if (answerType == "jxs") {
          this.moreTypeShow = true;
          this.getChainsList();
        } else if (answerType == "md") {
          this.storeTypeShow = true;
          this.storeType = val.storeType;
          this.getStoresList();
        }
      }
    },
    // 删除经销商或者门店
    closeJXSorMD(item, index) {
      if (item.answerType == "jxs") {
        item.chainList.splice(index, 1);
      } else if (item.answerType == "md") {
        item.storeList.splice(index, 1);
      }
    },
    getChainsList(value = "") {
      this.chainsData = [];
      chainsList({
        chainCode: "", //	string	经销商编码
        chainName: value, //	string	经销商名称
        limit: 100,
      })
        .then((res) => {
          if (res.code == 200 && res.rows) {
            this.chainsData = res.rows;
          } else {
            this.chainsData = [];
          }
        })
        .catch(() => {
          this.chainsData = [];
        });
    },
    getStoresList(value = "") {
      this.storesData = [];
      storesList({
        storeCategoryList: this.storeType ? this.storeType.split(",") : [], //	门店类型数组
        storeName: value, //	门店名称或者编号搜索，模糊搜索
        pageNum: 1, //	int	    页码
        PageSize: 100, // 每页数
      })
        .then((res) => {
          if (res.code == 200 && res.rows) {
            this.storesData = res.rows;
          } else {
            this.storesData = [];
          }
        })
        .catch(() => {
          this.storesData = [];
        });
    },
    onConfirmChainsList(value) {
      if (value && value.chainName != undefined) {
        let JXSSataList = this.collectionItemList.find(
          (item) => item.answerType == "jxs"
        );
        if (!JXSSataList.chainList) {
          JXSSataList.chainList = [];
        }
        let isFlag = JXSSataList.chainList.find(
          (val) => val.chainCode == value.chainCode
        );
        if (!isFlag) {
          JXSSataList.chainList.push({
            chainName: value.chainName,
            chainCode: value.chainCode,
          });
          this.moreTypeShow = false;
        } else {
          this.$toast("当前经销商已添加，不能重复添加！");
        }
      }
    },
    onConfirmStoresList(value) {
      if (value && value.storeName != undefined) {
        let MDSataList = this.collectionItemList.find(
          (item) => item.answerType == "md"
        );
        if (!MDSataList.storeList) {
          MDSataList.storeList = [];
        }
        let isFlag = MDSataList.storeList.find(
          (val) => val.storeCode == value.storeCode
        );
        if (!isFlag) {
          MDSataList.storeList.push({
            storeName: value.storeName,
            storeCode: value.storeCode,
          });
          this.storeTypeShow = false;
        } else {
          this.$toast("当前门店已添加，不能重复添加！");
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.componVisitSummary {
  .van-f-red {
    color: red;
    width: 8px;
    display: inline-block;
    line-height: 26px;
  }

  .formLabel {
    margin: 0 16px;
    border-bottom: 1px solid #f1f1f1;
  }

  .formLabel .van-cell {
    padding: 10px 0;
  }

  .formLabel .van-cell::after {
    border: 0;
  }

  .formLabel .van-field {
    border: 1px solid #f1f1f1;
    padding: 6px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }

  .formLabel .van-field__control {
    padding: 0 10px;
  }

  .formLabel .formLabeltitle {
    position: absolute;
    top: 8px;
  }

  .lineGrey {
    height: 10px;
    width: 100%;
    background: #f1f1f1;
  }

  .z-checkbox .van-radio {
    padding: 6px 0;
  }

  .z-cell .van-cell__title {
    font-size: 16px;
  }

  .van-form {
    background-color: white;
  }
}
</style>
<style lang="scss">
.jxsBox {
  .jxsContent {
    margin-bottom: 10px;

    .item {
      padding: 5px;
      background: #e9e9e9;
      margin: 5px 0;

      .el-popover__reference-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .selectItem {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
    }
  }

  .tips {
    text-align: right;
  }
}

.table-headermd {
  font-size: 12px;
  text-align: center;
  position: initial;
  width: 98% !important;
  margin: 0 auto;
  border-right: 0;
}

.table-headermd .el-table__header,
.table-headermd .el-table__body {
  width: 100% !important;
}

/*.table-headermd col {width: 6.8rem;}*/
.table-headermd col:nth-child(4) {
  width: 5.6rem;
}

.table-headermd col:nth-child(2),
.table-headermd col:nth-child(3) {
  width: 4.6rem;
}

.table-headermd .van-cell {
  padding: 0 4px;
  height: 100%;
}

.table-headermd th.el-table__cell > .cell {
  padding: 0 4px;
  text-align: center;
}

.table-headermd th.el-table__cell:first-child > .cell {
  text-align: left;
}

.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}

.table-headermd .el-table__cell {
  padding: 4px 0;
}

.table-headermd.el-table .cell {
  padding: 0;
}

.table-headermd .tipTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.table-headermd::before {
  height: 0;
}

.xing {
  color: red;
  padding-left: 4px;
}

.formLabel .van-radio__label,
.formLabel .van-checkbox__label {
  font-size: 1.4rem;
}

.table-headermd .cell,
.el-table--border .el-table__cell:first-child .cell {
  padding: 0 4px;
}

.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #1989fa;
}

.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}

.isTableMust {
  padding: 4px;
  color: #999;
  margin: 0;
  margin-top: -10px;
}
.componVisitSummary {
  .van-popup {
    .tips {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 100px;
      z-index: 999999;
      div {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 15px;
        background: rgba(225, 236, 250, 0.8);
        border-radius: 6px;
        color: #575656;
      }
    }
  }
}
</style>