zkPCproject/src/views/ReceivingRecords/index.vue

<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" v-if="orgType != 3" style="margin-bottom: 10px">
        <div class="label">项目选择：</div>
        <div style="margin-left: 8px">
          <el-select
            v-model="searchForm.projectId"
            @change="houseChange"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel">
        <div class="label">筛选时间：</div>
        <div class="toptimeqhuan">
          <el-button
            class="btn"
            :type="searchForm.dateType == null ? 'primary' : ''"
            @click="tabtimetap(null)"
          >
            全部
          </el-button>
          <el-button
            class="btn"
            :type="searchForm.dateType == 0 ? 'primary' : ''"
            @click="tabtimetap(0)"
          >
            今日
          </el-button>
          <el-button
            class="btn"
            :type="searchForm.dateType == 1 ? 'primary' : ''"
            @click="tabtimetap(1)"
          >
            昨日
          </el-button>
          <el-button
            class="btn"
            :type="searchForm.dateType == 2 ? 'primary' : ''"
            @click="tabtimetap(2)"
          >
            近7天
          </el-button>
        </div>
        <div style="margin-left: 20px">
          <el-date-picker
            v-model="time"
            type="daterange"
            class="div-inp"
            range-separator="-"
            start-placeholder="开始日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            @change="timeChange"
          >
          </el-date-picker>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 15px" v-show="isOpen">
        <div class="div-lab">
          <div class="label">客户名称：</div>
          <el-input
            class="div-inp"
            maxlength="10"
            clearable
            placeholder="客户名称"
            v-model="searchForm.name"
          ></el-input>
        </div>

        <div class="div-lab">
          <div class="label">画像标签：</div>
          <el-select
            class="div-inp"
            multiple
            clearable
            filterable
            collapse-tags
            v-model="searchForm.keywordsId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in keywordsList"
              :key="item.keywordsId"
              :label="
                item.isInterval == 0
                  ? item.name + '-' + item.endName + item.unit
                  : item.name
              "
              :value="item.keywordsId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">录音类型：</div>
          <el-select
            v-model="searchForm.recording"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in recordingList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">置业顾问：</div>
          <el-select
            v-model="searchForm.accountId"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in accountList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <!-- 默认全部 -->
          <div class="label">标记顾问：</div>
          <el-select
            v-model="searchForm.markAdvisor"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-lab" v-if="false">
          <!-- 默认全部 -->
          <div class="label">是否违禁：</div>
          <el-select
            v-model="searchForm.taboo"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options11"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">接待时长：</div>
          <el-select
            clearable
            filterable
            v-model="searchForm.recDurationInterval"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">到访次数：</div>
          <el-select
            v-model="searchForm.visitRecord"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">接待标识：</div>
          <el-select
            v-model="searchForm.validInvalid"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options13"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">销讲执行：</div>
          <el-select
            v-model="searchForm.fractions"
            class="div-inp"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option label="30%及以下" :value="1"></el-option>
            <el-option label="31%～50%" :value="2"></el-option>
            <el-option label="51%～70%" :value="3"></el-option>
            <el-option label="71%及以上" :value="4"></el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">需求挖掘：</div>
          <el-select
            v-model="searchForm.wordFractions"
            class="div-inp"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option label="30%及以下" :value="1"></el-option>
            <el-option label="31%～50%" :value="2"></el-option>
            <el-option label="51%～70%" :value="3"></el-option>
            <el-option label="71%及以上" :value="4"></el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">挖掘话术：</div>
          <el-select
            v-model="searchForm.questionId"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in questionList"
              :key="item.id"
              :label="item.question"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">无效接待原因：</div>
          <el-select
            v-model="searchForm.invalidReason"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in marketingInvalidList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="div-lab">
          <div class="label">销讲业务：</div>
          <el-select
            class="div-inp"
            v-model="searchForm.marketingBusiness"
            multiple
            clearable
            filterable
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in templateList"
              :key="item.id"
              :label="item.templateName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 15px">
        <div style="margin-left: 110px">
          <el-button type="primary" @click="screen">筛选</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button @click="clearScreen" type="text">清空筛选条件</el-button>
        </div>
        <el-button style="margin-left: 10px" @click="isSystoleForm" type="text"
          >{{ isOpen ? "收起" : "展开"
          }}<i
            style="margin-left: 5px"
            :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          ></i
        ></el-button>

        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="rec_index_downLoad"
        >
          <el-button @click="downLoad" icon="el-icon-download"> 导出</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :show-column.sync="showColumn"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template slot-scope="{ row }" slot="menu">
          <el-button
            type="text"
            v-if="rec_index_show"
            @click="Receivedetailsabout(row)"
            >查看</el-button
          >
          <el-button
            type="text"
            v-if="rec_rewrite_show && row.mergeFlag == 0"
            @click="reWriteagain(row)"
            >重新转写</el-button
          >
          <el-button
            type="text"
            v-if="permissions.rec_index_delete"
            @click="deleteCS(row)"
          >
            删除接待
          </el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog
      title="重新转写"
      center
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- <div style="text-align: center;font-size: 16px" v-if="mergeflag">请等待录音合并之后再重新转写！</div> -->
      <el-form :model="form">
        <el-form-item label="转写方式" :label-width="80">
          <el-select
            v-model="form.project"
            placeholder="请选择"
            @change="changeFun"
          >
            <el-option
              v-for="(item, index) in projectList"
              :label="item.name"
              :key="index"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select v-model="form.language" placeholder="请选择">
            <el-option
              v-for="(item, index) in languageList"
              :label="item.name"
              :key="index"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="color: red; margin-left: 60px">
          提示：重新转写需要10分钟左右才能完成！
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      questionList: [], //挖掘话术
      marketingInvalidList: [], // 无效接待原因列表
      xiaojianglist: [], //销讲业务
      desc: "请等待录音合并之后再重新转写！",
      dialogVisible: false,
      projectList: [],
      languageList: [],
      form: {
        language: "",
        project: "",
      }, //重新转写
      tableIdName: "ReceivingRecordsIndex", // 当前页面需要的变量
      tableOption: this.$tableOption.ReceivingRecordsIndex, // 当前table配置项
      tableLoading: false, // 是否显示加载中
      showColumn: [], // 监听的显示列的变量
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },

      isOpen: false,
      TimetoAhoose: 2,
      time: [],
      houseList: [],
      orgType: localStorage.getItem("orgType"),
      options: [],
      keywordsList: [],
      accountList: [],
      recordingList: [
        {
          value: "0",
          label: "没有录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
        {
          value: "3",
          label: "未传完",
        },
      ],
      options3: [
        {
          value: "1",
          label: "0-15分钟",
        },
        {
          value: "2",
          label: "15-30分钟",
        },
        {
          value: "3",
          label: "30-60分钟",
        },
        {
          value: "4",
          label: "60-90分钟",
        },
        {
          value: "5",
          label: "90分钟以上",
        },
      ],
      options4: [
        {
          value: "1",
          label: "首次到访",
        },
        {
          value: "2",
          label: "2次到访",
        },
        {
          value: "3",
          label: "3次到访",
        },
        {
          value: "4",
          label: "三次以上",
        },
      ],
      options5: [
        {
          value: "1",
          label: "已标记",
        },
        {
          value: "0",
          label: "未标记",
        },
      ],
      options11: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],
      options13: [
        {
          label: "有效接待",
          value: "0",
        },
        {
          label: "无效接待",
          value: "1",
        },
      ],
      value: "",
      input: "",
      tableData: [],
      tophove: "",
      type: "0",
      searchForm: {
        name: "",
        keywordsId: [],
        recording: "",
        markAdvisor: null,
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        houseType: "",
        dateType: null,
        projectId: "",
        taboo: "",
        zfal: "", // 正反案例  0：正面案例  1：反面案例
        validInvalid: "", // 是否为有效接待 0：有效  1：无效
        marketingBusiness: [],
        invalidReason: "",
        question: "",
        wordFractions: "",
        fractions: "",
      },
      rec_index_show: false, // 按钮权限
      rec_rewrite_show: false, // 重新转写-按钮权限
      rec_index_text: false, // 按钮权限
      rec_index_voice: false, // 按钮权限
      rec_index_downLoad: false, // 按钮权限
      templateList: [], // 销讲业务列表
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },

  activated() {
    if (this.$route.query.types) {
      if (this.$route.query.types.indexOf("&") != -1) {
        let arr = this.$route.query.types.split("&");
        arr.forEach((item) => {
          let as = item.split(",");
          this.searchForm[as[0]] = as[1];
        });
      } else {
        let arr = this.$route.query.types.split(",");
        this.searchForm[arr[0]] = arr[1];
      }
    }

    if (this.$route.query.date) {
      this.time = this.$route.query.date.split(",");
      this.searchForm.staDate = this.time[0];
      this.searchForm.endDate = this.time[1];
      console.log("时间");
    }

    if (this.$route.query.validInvalid) {
      this.searchForm.validInvalid = this.$route.query.validInvalid;
    }
    if (this.$route.query.markAdvisor) {
      this.searchForm.markAdvisor = this.$route.query.markAdvisor;
    }
    if (this.$route.query.dateType) {
      this.searchForm.dateType = this.$route.query.dateType;
    }
    if (this.$route.query.staDate) {
      this.searchForm.staDate = this.$route.query.staDate;
    }
    if (this.$route.query.endDate) {
      this.searchForm.endDate = this.$route.query.endDate;
    }
    if (this.$route.query.houseId) {
      this.searchForm.projectId = this.$route.query.houseId;
    }

    if (
      this.$route.query.endDate &&
      this.$route.query.staDate &&
      this.time.length == 0
    ) {
      this.searchForm.dateType = null;
      this.time = [this.$route.query.staDate, this.$route.query.endDate];
    }

    // 获取项目列表
    this.zkhousePage();
  },

  created() {
    // 获取显隐的列表
    this.setTableOption();
    if (this.$route.query.types) {
      if (this.$route.query.types.indexOf("&") != -1) {
        let arr = this.$route.query.types.split("&");
        arr.forEach((item) => {
          let as = item.split(",");
          this.searchForm[as[0]] = as[1];
        });
      } else {
        let arr = this.$route.query.types.split(",");
        this.searchForm[arr[0]] = arr[1];
      }
    }

    if (this.$route.query.date) {
      this.time = this.$route.query.date.split(",");
      this.searchForm.staDate = this.time[0];
      this.searchForm.endDate = this.time[1];
      console.log("时间");
    }

    if (this.$route.query.validInvalid) {
      this.searchForm.validInvalid = this.$route.query.validInvalid;
    }
    if (this.$route.query.markAdvisor) {
      this.searchForm.markAdvisor = this.$route.query.markAdvisor;
    }
    if (this.$route.query.dateType) {
      this.searchForm.dateType = this.$route.query.dateType;
    }
    if (this.$route.query.staDate) {
      this.searchForm.staDate = this.$route.query.staDate;
    }
    if (this.$route.query.endDate) {
      this.searchForm.endDate = this.$route.query.endDate;
    }
    if (this.$route.query.houseId) {
      this.searchForm.projectId = this.$route.query.houseId;
    }
    if (this.$route.query.marketingBusiness) {
      this.searchForm.marketingBusiness = [this.$route.query.marketingBusiness];
    }

    if (
      this.$route.query.endDate &&
      this.$route.query.staDate &&
      this.time.length == 0
    ) {
      this.searchForm.dateType = null;
      this.time = [this.$route.query.staDate, this.$route.query.endDate];
    }

    this.rec_index_show = this.permissions["rec_index_show"];
    this.rec_rewrite_show = this.permissions["rec_rewrite_show"];
    this.rec_index_text = this.permissions["rec_index_text"];
    this.rec_index_voice = this.permissions["rec_index_voice"];
    this.rec_index_downLoad = this.permissions["rec_index_downLoad"];
  },
  mounted() {
    // 获取项目列表
    this.zkhousePage();
  },

  methods: {
    // 删除接待
    deleteCS(row) {
      console.log(row);
      this.$alert("确认删除此条记录吗？", `提示`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
      }).then(() => {
        this.$api.http.deleteCS({ cusId: row.id }).then((res) => {
          if (res.code == 10000) {
            this.$message.success(res.message);
            this.page.currentPage = 1;
            this.findbypage();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },

    // 获取话术
    findQuestionList() {
      axios({
        url: `/autoSR/zk/keywords/findQuestionList`,
        method: "get",
        params: {
          houseId: this.searchForm.projectId,
        },
      }).then((data) => {
        if (data.code == 0) {
          this.questionList = data.data;
        }
      });
    },
    // 无效接待原因列表
    getMarketingInvalidList() {
      this.$api.api.invalidList({ houseId: this.houseId }).then((res) => {
        if (res.data && res.data.obj) {
          this.marketingInvalidList = res.data.obj;
        } else {
          this.marketingInvalidList = [];
        }
      });
    },
    // 转写方式切换
    changeFun(value) {
      // console.log(value)
      this.form.language = "";
      this.projectList.forEach((item) => {
        if (item.code == value) {
          this.languageList = item.list;
          this.form.language = this.languageList[0].code;
        }
      });
    },
    // 转写方式数据获取
    findTransferMethod() {
      this.$api.api.findTransferMethod().then((res) => {
        console.log(res, " sajdklasjdklasjdklsajkdls");
        if (res.data) {
          this.projectList = res.data || [];
          this.languageList = (res.data && res.data[0].list) || [];
        }
      });
    },
    // 确定重新转写
    checkFun() {
      if (this.form.project === "" || this.form.language === "") {
        this.$message.error("请先选择转写方式");
        return;
      }
      Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$api.api
        .toTransferData({
          id: this.currentRow.id,
          transferMethod: this.form.project,
          transferLanguage: this.form.language,
        })
        .then((res) => {
          this.dialogVisible = false;
          this.getorgCode();
          this.$message.success("操作成功");
          Loading.close();
        })
        .catch(() => {
          Loading.close();
        });
    },
    reWriteagain(row) {
      this.dialogVisible = true;
      this.currentRow = row;
      // mergeFlag; //是否合并 0是 1 否
      this.form.project = row.transferMethod || "";
      if (row.transferLanguage) {
        this.projectList.forEach((item) => {
          if (item.code == row.transferLanguage) {
            this.languageList = item.list;
            this.form.language = row.transferLanguage || "";
          }
        });
      } else {
        this.form.language = "";
      }
    },
    // 获取销讲业务
    getMarketingBusiness() {
      this.$api.http
        .marketingBusiness({ houseId: this.searchForm.projectId })
        .then((res) => {
          console.log(res);
          if (res.code == 10000) {
            this.templateList = res.data;
          }
        });
    },
    // 获取当前页面的显隐
    setTableOption() {
      this.$db.getDataByKey(this.tableIdName).then((res) => {
        if (res.tableIdName == this.tableIdName) {
          this.showColumn = res.optionData;
        }
      });
    },
    isSystoleForm() {
      this.isOpen = !this.isOpen;
    },
    // 清除上次进入遗留的数据
    resetParams() {
      this.searchForm.taboo = "";
      this.searchForm.validInvalid = "";
      this.searchForm.endDate = "";
      this.searchForm.staDate = "";
      this.time = "";
    },

    downLoad() {
      let obj = {
        type: 1,
        ...this.searchForm,
      };
      obj.keywordIds = obj.keywordsId.join(",");
      obj.dateType = this.searchForm.staDate ? null : this.searchForm.dateType;
      exportMethodPost("autoSR/customer/pageExport", "接待记录", obj);
    },
    // 跳转接待详情
    Receivedetailsabout(row) {
      this.$api.http.findByCusIdcusId({ cusId: row.id }).then((res) => {
        if (res.data.length == 0) {
          this.$message({
            message: "无录音",
            type: "warning",
          });
        } else {
          this.$router.push({
            path: "/Receive/index",
            query: { flag: row.id, AudioIdx: 0 },
          });
        }
      });
    },
    // 删除此条接待记录
    deleteReceive(row) {
      console.log(row);
    },
    // 接待记录列表
    findbypage() {
      let obj = {
        current: this.page.currentPage,
        size: this.page.pageSize,
        type: 1,
        ...this.searchForm,
      };
      if (this.$route.query.houseId) {
        obj.projectId = this.$route.query.houseId;
      }
      obj.keywordIds = obj.keywordsId.join(",");
      obj.marketingBusiness = obj.marketingBusiness.join(",");
      obj.dateType = this.searchForm.staDate ? null : this.searchForm.dateType;
      this.$api.api.findbypage(obj).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.tableData = res.data.records || [];
          this.page.total = res.data.total;
          // 表格中设置ref属性，在数据渲染之后或者updated()之后
          this.$nextTick(() => {
            this.$refs.crud.doLayout();
          });
        }
      });
    },
    clearScreen() {
      this.page.currentPage = 1;
      this.searchForm = {
        name: "",
        keywordsId: [],
        recording: "",
        markAdvisor: null,
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        houseType: "",
        dateType: null,
        taboo: "",
        questionId: "",
        fraction: "",
        wordFraction: "",
        marketingBusiness: [],
        zfal: "",
        projectId:
          this.orgType == 3
            ? localStorage.getItem("houseId")
            : this.houseList[0].id,
      };
      if (this.$route.query.houseId) {
        this.searchForm.projectId = this.$route.query.houseId;
      }
      this.findbypage();
    },
    houseChange() {
      this.findbypage();
      this.findKeywords();
      this.findQuestionList();
      // this.getMarketingBusiness();// 销讲业务
      // 获取置业顾问列表
      this.findUserListByHouseId();
    },
    timeChange(e) {
      if (!e) {
        this.searchForm.dateType = null;
        this.searchForm.staDate = "";
        this.searchForm.endDate = "";
      } else {
        this.searchForm.dateType = null;
        this.searchForm.staDate = e[0];
        this.searchForm.endDate = e[1];
      }

      this.houseChange();
    },
    screen() {
      this.page.currentPage = 1;
      this.findbypage();
    },
    findKeywords() {
      this.$api.api
        .findKeywords({
          dateType: this.searchForm.staDate ? null : this.searchForm.dateType,
          statDateStart: this.searchForm.staDate,
          statDateEnd: this.searchForm.endDate,
          projectId: this.searchForm.projectId,
          type: this.type,
        })
        .then((res) => {
          this.keywordsList = res.data;
        });
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          // console.log(res)
          this.houseList = res.data;
          if (localStorage.getItem("orgType") == 3) {
            if (this.$route.query.houseId) {
              this.searchForm.projectId = this.$route.query.houseId;
            } else {
              this.searchForm.projectId = localStorage.getItem("houseId");
            }
          } else {
            this.searchForm.projectId = res.data[0].id;
          }
          this.houseChange();
          // 获取转写方式
          this.findTransferMethod();
          // 获取销讲业务
          this.getMarketingBusiness();
        });
    },
    // 置业顾问列表
    async findUserListByHouseId() {
      let result = await this.$api.api.findUserListByHouseId({
        orgType: localStorage.getItem("orgType"),
        projectId: this.searchForm.projectId,
      });
      this.accountList = result.data;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.findbypage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.findbypage();
    },
    tabtimetap(idx) {
      this.searchForm.staDate = "";
      this.searchForm.endDate = "";
      // this.$set(this, "time", null);
      this.searchForm.dateType = idx;
      this.time = [];
      this.houseChange();
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000

      var yyyy = date.getFullYear() + "-";

      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      // var dd = date.getDate() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return yyyy + MM + dd;
    },
  },

  watch: {
    $route(to, from) {
      this.resetParams();
      //监听路由是否变化
      if (to.query.types != from.query.types && to.query.types != null) {
        let arr = this.$route.query.types.split(",");
        this.searchForm[arr[0]] = arr[1];
      }

      if (to.query.date != from.query.date && to.query.date != null) {
        this.time = this.$route.query.date.split(",");
        this.searchForm.staDate = this.time[0];
        this.searchForm.endDate = this.time[1];
      }
    },

    showColumn(nowV) {
      let params = {
        tableIdName: this.tableIdName,
        optionData: nowV,
      };
      this.$db.upDate(params);
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.box-center {
  width: 100%;
  padding: 5px 15px 40px;
  min-width: 1000px;
}

.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}

.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;

  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .label {
      font-size: 16px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      min-width: 120px;
      text-align: right;
    }

    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
      margin-left: 9px;
    }

    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }

    .toptimeqhuan .btn {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}

.div-lab {
  display: flex;
  margin: 5px;
}

.div-inp {
  width: 250px;
}
/deep/ .el-table__header-wrapper {
  thead {
    tr {
      th {
        background: #f5f7fa;
        color: #333333;
      }
    }
  }
}
/deep/ .el-button--primary {
  background: #2671e2 !important;
  border: 1px solid #2671e2 !important;
}
/deep/ .el-button--text {
  color: #2671e2;
}
</style>