zkPCproject/src/views/building/index.vue

<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 10px">
        <div class="div-lab">
          <!-- <div class="label">合同结束日期：</div> -->
          <div class="label" style="min-width: 80px">
            <el-select
              v-model="searchForm.timeType"
              placeholder="请选择"
              style="width: 100px"
            >
              <el-option
                v-for="item in timeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-date-picker
            v-model="starTime"
            class="div-inp"
            @change="timeChange1"
            style="width: 250px"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <div v-if="orgType == 0" class="div-lab">
          <div class="label">项目类型：</div>
          <el-select
            v-model="searchForm.houseType"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options"
              :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.serviceStatus"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">项目名称：</div>
          <el-select
            class="div-inp"
            v-model="searchForm.propertyName"
            filterable
            clearable
            @change="houseChange"
            placeholder="请选择项目"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.propertyName"
            >
            </el-option>
          </el-select>
        </div>
        <div class="div-lab" v-show="isOpen">
          <div class="label">地区：</div>
          <el-cascader
            :props="props1"
            @change="locationsChange1"
            :options="addressOptions"
            placeholder="省/市"
            size="small"
            separator="/"
            v-model="area"
            filterable
            clearable
          ></el-cascader>
        </div>
        <div
          v-if="orgType == 0 || orgType == 1"
          class="div-lab"
          v-show="isOpen"
        >
          <div class="label">运营人员：</div>
          <el-select
            v-model="searchForm.operationStaffId"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in operaList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>
        <div v-if="orgType == 0" class="div-lab" v-show="isOpen">
          <div class="label">代理商名称：</div>

          <el-input
            class="div-inp"
            maxlength="30"
            clearable
            v-model="searchForm.agentName"
            placeholder="请输入内容"
          >
          </el-input>
        </div>
        <div v-if="orgType != 2" class="div-lab" v-show="isOpen">
          <div class="label">公司名称：</div>
          <el-input
            class="div-inp"
            v-model="searchForm.corporateName"
            placeholder="请输入内容"
            maxlength="30"
            clearable
          >
          </el-input>
        </div>
      </div>
      <div class="app-titel" style="margin-top: 10px">
        <div class="label" style="color: #ffffff">筛选相关：</div>
        <div style="margin-left: 5px">
          <el-button @click="screen" type="primary">筛选</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button @click="empty" 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: 20px" v-if="orgType != 2">
          <el-button v-if="cus_build_index_add" type="primary" @click="addHouse"
            >新增</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="cus_build_index_edit" @click="edit(row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            v-if="orgType != 2 && cus_build_index_change"
            @click="changeAccount(row)"
            >更换账号
          </el-button>

          <el-dropdown>
            <el-button type="text" size="small" style="margin-left: 10px"
              >更多</el-button
            >
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  type="text"
                  size="small"
                  v-if="cus_build_index_sys"
                  @click="editOpera(row, 0)"
                  >系统运营</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  size="small"
                  v-if="cus_build_index_agent"
                  @click="editOpera(row, 1)"
                  >售后运营</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  size="small"
                  v-if="cus_build_index_bindAgent"
                  @click="bindAgent(row)"
                  >绑定代理商</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="cus_build_index_del"
                  @click="del(row)"
                  >删除</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="cus_build_index_open"
                  size="small"
                  @click="toDisable(row)"
                  >{{ row.lockFlag == 0 ? "禁用" : "启用" }}</el-button
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  type="text"
                  v-if="permissions['cus_build_index_sug']"
                  size="small"
                  @click="toOtherPage(row)"
                  >使用建议</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </avue-crud>
    </div>

    <el-dialog
      :title="editFlag ? '编辑项目' : '新增项目'"
      :visible.sync="dialogVisible"
      @close="dialogClose"
      width="600px"
      center
    >
      <div
        style="padding: 0 10px;height: 500px; overflow-y: scroll"
      >
        <el-form
          :model="ruleForm"
          label-position="labelPosition"
          ref="ruleForm"
          label-width="150px"
          :rules="rules"
        >
          <el-form-item label="公司" prop="orgCode" v-if="orgType != 2">
            <el-select
              :disabled="editFlag == true"
              v-model="ruleForm.orgCode"
              filterable
              placeholder="请选择公司"
            >
              <el-option
                v-for="item in orgList"
                :key="item.id"
                :label="item.name"
                :value="item.orgCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目类型" prop="houseType" v-if="orgType != 2">
            <el-radio-group class="houseType" v-model="ruleForm.houseType">
              <el-radio :label="0">正式</el-radio>
              <el-radio :label="1">试用</el-radio>
              <el-radio :label="2">演示</el-radio>
              <el-radio :label="3">测试</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="项目名称" prop="propertyName">
            <el-input
              v-model="ruleForm.propertyName"
              placeholder="项目名称"
              maxlength="30"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="合同起止日期"
            prop="startWorking"
            v-if="orgType != 2"
          >
            <el-date-picker
            style="width:280px"
              v-model="time"
              @change="timeChange"
              type="daterange"
              range-separator="-"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="日报推送时间" prop="time">
            <el-time-picker
            style="width:280px"
              v-model="ruleForm.time"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="日报推送时间"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="项目离线推送时间" prop="offLine">
            <el-time-picker
              is-range
              style="width:280px"
              v-model="ruleForm.offLine"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="HH:mm"
              format="HH:mm"
            >
            </el-time-picker>
          </el-form-item>

          <el-form-item label="优秀案例" prop="caseShow">
            <el-radio-group v-model="ruleForm.caseShow">
              <el-radio :label="0">全部可见</el-radio>
              <el-radio :label="1">团队可见</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="客户标签匹配" prop="tagMatching">
            <el-radio-group v-model="ruleForm.tagMatching">
              <el-radio :label="0">全部话术</el-radio>
              <el-radio :label="1">客户话术</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="短录音转写" prop="shortRecordingSetting">
            <el-radio-group v-model="ruleForm.shortRecordingSetting">
              <el-radio :label="0">转写</el-radio>
              <el-radio :label="1">不转写</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="无效接待审核" prop="auditReception">
            <el-radio-group v-model="ruleForm.auditReception">
              <el-radio :label="0">审核</el-radio>
              <el-radio :label="1">不审核</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="联系人" prop="linkman">
            <el-input
              v-model="ruleForm.linkman"
              maxlength="20"
              placeholder="联系人"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="接待时长" prop="linkman">
            <el-input
              v-model="ruleForm.closeTime"
              maxlength="10"
              placeholder="接待时长(分钟)"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="联系手机" prop="linkmanPhone">
            <el-input
              v-model="ruleForm.linkmanPhone"
              type="tel"
              placeholder="联系手机"
              maxlength="11"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目地区" prop="provinceId">
            <el-cascader
              :props="props"
              @change="locationsChange"
              :options="addressOptions"
              placeholder="省/市"
              size="small"
              separator="/"
              v-model="ruleForm.area"
              filterable
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="ruleForm.address"
              placeholder="详细地址"
              type="textarea"
              maxlength="60"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员账号" prop="managerPhone" v-if="!editFlag">
            <el-input
              auto-complete="new-password"
              maxlength="11"
              placeholder="管理员账号"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
              v-model="ruleForm.managerPhone"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="管理员密码"
            prop="managerPassword"
            v-if="!editFlag"
          >
            <el-input
              auto-complete="new-password"
              placeholder="管理员密码"
              v-model="ruleForm.managerPassword"
              maxlength="18"
              type="passsword"
              show-password
              :disabled="passFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="转写方式" prop="transliterationMethod">
            <div style="display:flex;align-items:center">
              <el-select style="width:150px" v-model="ruleForm.transliterationMethod" 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 style="width:150px" v-model="ruleForm.language" placeholder="请选择语种">
                <el-option v-for="(item,index) in languageList" :label="item.name" :key="index" :value="item.code"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        style="
          border-top: 1px solid #eee;
          padding-top: 20px;
          display: flex;
          justify-content: end;
        "
      >
        <el-button @click="addSurequxiao()">取 消</el-button>
        <el-button type="primary" :loading="loadingFlag" @click="addSure">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="更换账号"
      :visible.sync="changeFlag"
      @close="$refs.accountForm.resetFields()"
      width="400px"
      :center="true"
    >
      <el-form
        :model="accountForm"
        label-width="100px"
        ref="accountForm"
        :rules="accountRules"
      >
        <el-form-item label="管理员账号:" prop="managerPhone">
          <el-input
            style="width: 200px"
            maxlength="11"
            placeholder="管理员账号"
            v-model.number="accountForm.managerPhone"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理员密码:" prop="managerPassword">
          <el-input
            style="width: 200px"
            :disabled="passFlag"
            placeholder="管理员密码"
            show-password
            v-model="accountForm.managerPassword"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        style="
          border-top: 1px solid #eee;
          padding-top: 20px;
          display: flex;
          justify-content: end;
        "
      >
        <el-button @click="changeFlag = false">取 消</el-button>
        <el-button type="primary" @click="changeSure" :loading="loadingFlag"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="sysFlag == 0 ? '绑定系统运营' : '绑定售后运营'"
      :visible.sync="operaVisible"
      :center="true"
    >
      <el-form
        :model="operaForm"
        label-position="labelPosition"
        :rules="operaRules"
        ref="operaForm"
        label-width="140px"
      >
        <el-form-item label="运营人员：" prop="operationalPeople">
          <el-select
            v-model="operaForm.operationalPeople"
            filterable
            multiple
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsoperationalPeople"
              :key="item.value"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="
          border-top: 1px solid #eee;
          padding-top: 20px;
          display: flex;
          justify-content: end;
        "
      >
        <el-button @click="operaVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="绑定代理商" :visible.sync="agentVisible" :center="true">
      <el-form
        :model="agentForm"
        label-position="labelPosition"
        :rules="agentRule"
        ref="agentForm"
        label-width="140px"
      >
        <el-form-item label="代理商：" prop="agentId">
          <el-select
            v-model="agentForm.agentId"
            style="width: 80%"
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsagentId"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="
          border-top: 1px solid #eee;
          padding-top: 20px;
          display: flex;
          justify-content: end;
        "
      >
        <el-button @click="agentVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loadingFlag" @click="saveAgent()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getAreaList } from "@/api/modules/api";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        // callback(new Error("请输入手机号"));
        callback();
      } else {
        if (value) {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            // alert("手机号码不合法，请重新输入");
            callback(new Error("手机号格式错误，请重新输入"));
          }
        }
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入管理员账号"));
      } else {
        if (value) {
          this.passFlag = false;
          if (!/^1[3456789]\d{9}$/.test(value)) {
            // alert("手机号码不合法，请重新输入");
            callback(new Error("手机号格式错误，请重新输入"));
          } else {
            // 验证电话号码
            this.$api.api.verPhone(value).then((res) => {
              // console.log(res);
              // 判断数据是否已经有了
              if (res.data) {
                // 由用户
                this.$api.api
                  .userVerify({
                    houseId: this.accountForm.id,
                    orgType: 3,
                    accountId: res.data.sysUser.accountId,
                    username: res.data.sysUser.username,
                    agentId: localStorage.getItem("agentId"),
                    orgCode: localStorage.getItem("orgCode"),
                  })
                  .then((res1) => {
                    this.resetFlag = true;
                    this.passFlag = true;
                    if (this.changeFlag) {
                      this.accountForm.managerPassword =
                        res.data.sysUser.resultPwd;
                    } else {
                      this.ruleForm.managerPassword =
                        res.data.sysUser.resultPwd;
                    }
                    callback();
                  })
                  .catch((err) => {
                    console.log(err);
                    //
                    this.resetFlag = false;
                    callback(new Error(err));
                  });
              } else {
                // 没有用户
                // console.log("没有用户");
                // callback(new Error("没有管理员账号"));
                if (this.changeFlag) {
                  this.accountForm.managerPassword = "";
                } else {
                  this.ruleForm.managerPassword = "";
                }
                this.resetFlag = true;
                this.passFlag = false;
                callback();
              }
            });
          }
        }
        callback();
      }
    };
    return {
      tableIdName: "buildingIndex", // 当前页面需要的变量
      tableOption: this.$tableOption.buildingIndex, // 当前table配置项
      tableLoading: false, // 监听的显示列的变量
      showColumn: [], // 监听的显示列的变量
      page: {
        total: this.total, // 总页数
        currentPage: 1, // 当前页数
        pageSize: this.size, // 每页显示多少条
      },

      isOpen: false,
      props: {
        lazy: true,
        // checkStrictly: true,
        async lazyLoad(node, resolve) {
          console.log(node, 123);
          const { level } = node;
          if (level == 0) {
            console.log(23);
            const { data } = await getAreaList({ parentId: 0 }); //获取省接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: false,
              };
            });
            resolve(nodes);
          } else if (level == 1) {
            const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: true,
              };
            });
            resolve(nodes);
          }
        },
      },
      props1: {
        lazy: true,
        checkStrictly: true,
        expandTrigger: "hover",
        async lazyLoad(node, resolve) {
          // console.log(node, 123);
          const { level } = node;
          if (level == 0) {
            console.log(23);
            const { data } = await getAreaList({ parentId: 0 }); //获取省接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: false,
              };
            });
            resolve(nodes);
          } else if (level == 1) {
            const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: true,
              };
            });
            resolve(nodes);
          } else {
            resolve();
          }
        },
      },
      area: [],
      editFlag: false,
      changeFlag: false,
      operaVisible: false,
      resetFlag: false,
      passFlag: false,
      starTime: [],
      searchForm: {
        corporateName: "",
        propertyName: "",
        provinceId: "",
        serviceStatus: "",
        houseType: "",
        timeType: "0",
        // residueTime: 7,
        startWorking: "",
        endWorking: "",
        agentName: "",
        operationalPeople: "",
        operationStaffId: "",
      },
      areaList: [],
      operaList: [],
      options1: [
        {
          value: "0",
          label: "服务中",
        },
        {
          value: "1",
          label: "已过期",
        },
      ],
      options: [
        {
          value: "0",
          label: "正式",
        },
        {
          value: "1",
          label: "试用",
        },
        {
          value: "2",
          label: "演示",
        },
        {
          value: "3",
          label: "测试",
        },
      ],
      timeTypeList: [
        {
          value: "0",
          label: "添加时间",
        },
        {
          value: "1",
          label: "合同结束日期",
        },
      ],

      value: "",
      input: "",
      sysFlag: "0",
      idx: "0",
      tableData: [],
      optionsoperationalPeople: [],
      orgType: "",
      orgList: [],
      operationList: [],
      dialogVisible: false,
      dialogVisible1: false,
      agentVisible: false,
      loadingFlag: false,
      time: [],
      addressOptions: [],
      accountForm: {
        managerPassword: "",
        managerPhone: "",
      },
      accountRules: {
        managerPhone: [
          { required: true, message: "请填写账号", trigger: "blur" },
          { validator: validatePass1, trigger: "blur" },
        ],
        managerPassword: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "请输入6~18位，数字或字母组合的密码",
            trigger: "blur",
          },
        ],
      },
      houseList: [], // 项目列表
      ruleForm: {
        orgCode: "", //公司标识
        houseType: 0, //项目类型
        propertyName: "", //项目名称
        startWorking: "", //活动开始时间
        endWorking: "", //活动结束时间
        linkman: "", //联系人
        linkmanPhone: "", //联系手机
        area: [], //项目地区
        address: "", //详细地址
        operationalPeople: "", //运营人员
        managerPhone: "", //管理员账号
        managerPassword: "", //密码
        provinceId: "", //省id
        cityId: "", //市id
        agentId: localStorage.getItem("agentId"),
        time: "22:00", // 日报推送时间
        closeTime: "120", // 接待时长（自动结束）
        offLine: ["08:00", "20:00"], // 离线推送时间段
        caseShow: 0, // 优秀案例
        tagMatching: 0, // 客户标签匹配
        transliterationMethod: '',//转写方式 
        language:'',//语言
        shortRecordingSetting: 0, // 短录音是否转写 是否转写短录音 0 转写(默认)  1 不转写
        auditReception: 1, // 无效接待审核 0 审核 1不审核
      },
      ruleForm1: {},
      optionsagentId: [],
      rules: {
        orgCode: [{ required: true, message: "请选择公司", trigger: "blur" }],
        propertyName: [
          { required: true, message: "请填写项目名称", trigger: "change" },
        ],
        transliterationMethod: [
          { required: true, message: "请选择转写方式", trigger: "change" },
        ],
        managerPassword: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "请输入6~18位，数字或字母组合的密码",
            trigger: "blur",
          },
        ],
        startWorking: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
        time: [{ required: true, message: "请选择时间", trigger: "change" }],
        managerPhone: [
          { required: true, message: "请填写账号", trigger: "change" },
          { validator: validatePass1, trigger: "blur" },
        ],
        linkmanPhone: [{ validator: validatePass, trigger: "blur" }],
        provinceId: [
          { required: true, message: "请选择省市", trigger: "change" },
        ],
        offLine: [
          { required: true, message: "请选择离线推送时间", trigger: "change" },
        ],
        caseShow: [
          { required: true, message: "请选择优秀案例", trigger: "change" },
        ],
        tagMatching: [
          { required: true, message: "请选择客户标签匹配", trigger: "change" },
        ],
      },
      operaForm: {
        operationalPeople: "",
      },
      operaRules: {
        operationalPeople: [
          { required: false, message: "请选择运营人员", trigger: "blur" },
        ],
      },
      agentRule: {
        agentId: [{ required: true, message: "请选择代理商", trigger: "blur" }],
      },
      agentForm: {
        agentId: "",
      },
      projectList:[],//转写方式
      languageList:[]//语言
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    showColumn(nowV) {
      let params = {
        tableIdName: this.tableIdName,
        optionData: nowV,
      };
      this.$db.upDate(params);
    },
  },
  created() {
    // 获取显隐的列表
    this.setTableOption();
    this.cus_build_index_add = this.permissions["cus_build_index_add"];
    this.cus_build_index_edit = this.permissions["cus_build_index_edit"];
    this.cus_build_index_change = this.permissions["cus_build_index_change"];
    this.cus_build_index_sys = this.permissions["cus_build_index_sys"];
    this.cus_build_index_agent = this.permissions["cus_build_index_agent"];
    this.cus_build_index_bindAgent = this.permissions["cus_build_index_bindAgent"];
    this.cus_build_index_del = this.permissions["cus_build_index_del"];
    this.cus_build_index_open = this.permissions["cus_build_index_open"];
    // 获取转写方式数据
    this.findTransferMethod()
  },
  mounted() {
    if (this.$route.query.serviceStatus) {
      this.starTime = this.$route.query.residueTime;
      this.searchForm.startWorking = this.starTime[0];
      this.searchForm.endWorking = this.starTime[1];
      this.searchForm.serviceStatus = this.$route.query.serviceStatus;
      this.searchForm.houseType = "0";
      this.searchForm.timeType = "1";
    }
    if (this.$route.query.time) {
      this.starTime = [this.$route.query.time, this.$route.query.time];
      this.searchForm.startWorking = this.starTime[0];
      this.searchForm.endWorking = this.starTime[1];
    }

    if (this.$route.query.types) {
      this.starTime = [
        this.$route.query.types.split(",")[0],
        this.$route.query.types.split(",")[1],
      ];
      this.searchForm.startWorking = this.starTime[0];
      this.searchForm.endWorking = this.starTime[1];
    }
    this.orgType = localStorage.getItem("orgType");
    // 检测某些字段是否可以展示
    this.checkOption();
    // 获取公司列表数据
    this.getOrgList();
    // 获取运营人员
    this.getOperaList();
    // this.getAllOperationsStaff();
    // 获取地区列表
    // this.getCityList();
    // 获取列表数据
    this.zkhousePage();
    // 获取项目列表
    this.zkhousePages();
    
  },
  methods: {
    changeFun(value){
        // console.log(value)
      this.ruleForm.language = ''
      this.projectList.forEach(item=>{
        if(item.code==value){
          this.languageList = item.list
          this.ruleForm.language = this.languageList[0].code
        }
      })
    },
    // 转写方式
    findTransferMethod(){
      axios({
          url: `autoSR/zkhouse/findTransferMethod`,
          method: "get",
          data: {
          },
        }).then((res) => {
          // console.log(res)
          if(res.code==0){
            this.projectList = res.data||[]
            this.languageList = res.data&&res.data[0].list||[]
          }
      });
    },
    // 获取当前页面的显隐
    setTableOption() {
      this.$db.getDataByKey(this.tableIdName).then((res) => {
        console.log(res, "获取存储的res");
        if (res.tableIdName == this.tableIdName) {
          this.showColumn = res.optionData;
        }
      });
    },

    // 检测是否可以展示某些字段
    checkOption() {
      let checkArr = ["代理商", "公司", "运营人员", "项目类型"];
      checkArr.forEach((item) => {
        let index = this.$tableOption[this.tableIdName].column.findIndex(
          (findObj) => item == findObj.label
        );
        if (index >= 0) {
          let obj = this.$tableOption[this.tableIdName].column[index];
          if (obj.label == "代理商" && this.orgType == 0) {
            obj.hide = false;
            obj.showColumn = true;
          }
          if (
            (obj.label == "公司" || obj.label == "项目类型") &&
            this.orgType != 2
          ) {
            obj.hide = false;
            obj.showColumn = true;
          }

          if (
            obj.label == "运营人员" &&
            (this.orgType == 0 || this.orgType == 1)
          ) {
            obj.hide = false;
            obj.showColumn = true;
          }
        }
      });
    },

    isSystoleForm() {
      this.isOpen = !this.isOpen;
    },
    //切换项目
    houseChange() {
      this.page.currentPage = 1;
      this.zkhousePage();
    },
    //获取项目
    zkhousePages() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
        });
    },
    getOperaList() {
      if (this.orgType == 1) {
        this.$api.http
          .getAllOperationsStaffByAgent({
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            // console.log(1);
            this.operaList = res.data;
            // this.operaVisible = true;
          });
      } else {
        this.$api.http.getAllOperationsStaff().then((res) => {
          this.operaList = res.data;
          // this.operaVisible = true;
          // console.log(2);
        });
      }
    },
    getCityList() {
      this.$api.api.getAreaList({ parentId: 0 }).then((res) => {
        // console.log(res,'地区列表');
        this.areaList = res.data;
      });
    },
    bindAgent(row) {
      // console.log(row);
      this.findMyAgent(row);
      this.agentVisible = true;
    },
    saveAgent() {
      this.$refs.agentForm.validate((valid) => {
        if (valid) {
          this.loadingFlag = true;
          console.log(this.agentForm);
          this.$api.api
            .saveAgent({
              agentId: this.agentForm.agentId,
              id: this.agentForm.houseId,
            })
            .then((res) => {
              setTimeout(() => {
                this.loadingFlag = false;
                console.log("防重");
              }, 1);
              this.$message.success("操作成功");
              this.zkhousePage();
              this.agentVisible = false;
            })
            .catch((err) => {
              this.loadingFlag = false;
            });
        }
      });
    },
    findMyAgent(row) {
      this.$api.http.findMyAgent({ orgType: this.orgType }).then((res) => {
        console.log(res.data);
        this.optionsagentId = res.data;
        this.agentForm.orgCode = row.orgCode;
        this.agentForm.houseId = row.id;
        this.agentForm.agentId = row.agentId;
      });
    },
    saveOpera() {
      this.$refs.operaForm.validate((valid) => {
        if (valid) {
          // console.log(valid,this.operaForm);
          this.loadingFlag = true;
          this.$api.api
            .zkoperationrecordSaveHouse({
              orgType: 3,
              accountIds: this.operaForm.operationalPeople.join(","),
              orgId: this.operaForm.orgId,
              orgCode: this.operaForm.orgCode,
              operationType: this.idx == 0 ? "1" : "2",
            })
            .then((res) => {
              console.log(res);
              setTimeout(() => {
                this.loadingFlag = false;
                console.log("防重");
              }, 1);
              this.$message.success("操作成功");
              this.operaVisible = false;
              this.zkhousePage();
            })
            .catch((err) => {
              this.loadingFlag = false;
            });
        }
      });
    },
    editOpera(row, idx) {
      // console.log(row,idx);
      // 获取运营人员列表
      this.operaForm.orgId = row.id;
      this.operaForm.orgCode = row.orgCode;
      this.sysFlag = idx;
      this.idx = idx;
      this.AllOperationsStaff(idx, row);
      this.zkoperationrecordFindByOrg(row.id, idx, row.agentId);
    },
    zkoperationrecordFindByOrg(orgId, idx, agentId) {
      this.$api.api
        .zkoperationrecordFindByOrg({
          orgType: 3,
          orgId,
          agentId,
          operationType: this.idx == 0 ? "1" : "2",
        })
        .then((res) => {
          // console.log(res);
          if (res.data.length == 0) {
            // 没有运营人员
            this.operaForm.operationalPeople = [];
          } else {
            let arr = [];
            // 有运营
            res.data.map((item) => {
              arr.push(item.accountId);
            });
            this.operaForm.operationalPeople = arr;
          }
        });
    },
    //获取运营人员
    AllOperationsStaff(idx, row) {
      console.log(idx);
      this.optionsoperationalPeople = [];
      if (idx == 1) {
        this.$api.http
          .getAllOperationsStaffByAgent({
            agentId: row.agentId,
          })
          .then((res) => {
            this.optionsoperationalPeople = res.data;
            this.operaVisible = true;
          });
      } else {
        this.$api.http.getAllOperationsStaff().then((res) => {
          this.optionsoperationalPeople = res.data;
          this.operaVisible = true;
        });
      }

      // this.$api.api.getAllOperationsStaffByAgent({agentId}).then((res) => {
      //   this.optionsoperationalPeople = res.data;
      // });
    },
    screen() {
      this.page.currentPage = 1;
      this.zkhousePage();
    },
    addSurequxiao() {
      this.dialogVisible = false;
    },
    // 添加项目this.ruleForm.closeTim
    addSure() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.resetFlag) {
            return;
          }
          this.loadingFlag = true;
          if (this.ruleForm.closeTime && this.ruleForm.closeTime < 30) {
            this.$message.error("自动结束接待时长限制最小为30分钟");
            this.loadingFlag = false;
            return;
          }
          if (this.ruleForm.closeTime && this.ruleForm.closeTime > 720) {
            this.$message.error("自动结束接待时长限制最大为720分钟");
            this.loadingFlag = false;
            return;
          }
          if (this.ruleForm.language=='') {
            this.$message.error("请选择转写语言");
            this.loadingFlag = false;
            return;
          }
          this.ruleForm.offLine = this.ruleForm.offLine.join("~");
          // 编辑
          if (this.editFlag) {
            this.$api.api
              .editZkhouse(this.ruleForm)
              .then((res) => {
                if (res.code == 0) {
                  this.dialogVisible = false;
                  setTimeout(() => {
                    this.loadingFlag = false;
                  }, 1);
                  this.$message.success("编辑成功");
                  this.zkhousePage();
                }
              })
              .catch((err) => {
                this.loadingFlag = false;
              });
          } else {
            // 添加
            this.$api.api
              .addZkhouse(this.ruleForm)
              .then((res) => {
                if (res.code == 0) {
                  this.dialogVisible = false;
                  setTimeout(() => {
                    this.loadingFlag = false;
                  }, 1);
                  this.$message.success("新增项目成功");
                  this.zkhousePage();
                }
              })
              .catch((err) => {
                this.loadingFlag = false;
              });
          }
        }
      });
    },

    // 跳转其他页面
    toOtherPage(page) {
      console.log(page);
      this.$router.push({
        path: "/suglist",
        query: {
          id: page.id,
        },
      });
    },

    toDisable(row) {
      this.$confirm(
        `确定${
          row.lockFlag == 0
            ? "禁用" + "-" + row.propertyName + "-"
            : "启用" + "-" + row.propertyName + "-"
        }项目吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // return
          // console.log(123);
          this.$api.api
            .editZkhouse({ id: row.id, lockFlag: row.lockFlag == 0 ? 1 : 0 })
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.zkhousePage();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch((err) => {
          // console.log('关闭');
          // console.log(err);
        });
    },
    dialogClose() {
      this.restFrom();
    },
    restFrom() {
      this.$refs.ruleForm.resetFields();
      this.time = [];
      this.ruleForm = {
        orgCode: "", //公司标识
        houseType: 0, //项目类型
        propertyName: "", //项目名称
        startWorking: "", //活动开始时间
        endWorking: "", //活动结束时间
        linkman: "", //联系人
        linkmanPhone: "", //联系手机
        area: [], //项目地区
        address: "", //详细地址
        operationalPeople: "", //运营人员
        managerPhone: "", //管理员账号
        managerPassword: "", //密码
        provinceId: "", //省id
        cityId: "", //市id
        agentId: localStorage.getItem("agentId"),
        time: "22:00", // 日报推送时间
        closeTime: "120", // 接待时长（自动结束）
        offLine: ["08:00", "20:00"], // 离线推送时间段
        caseShow: 0, // 优秀案例
        tagMatching: 0, // 客户标签匹配
      };
    },
    // 新增项目,弹框显示
    addHouse() {
      this.editFlag = false;
      this.dialogVisible = true;
      this.passFlag = false;
    },
    edit(row) {
      console.log(row);
      this.resetFlag = true;
      this.time = [
        row.startWorking.substring(0, 10),
        row.endWorking.substring(0, 10),
      ];
      // console.log(this.time)
      this.ruleForm = Object.assign({}, row);
      this.ruleForm.shortRecordingSetting = row.shortRecordingSetting || 0
      this.ruleForm.area = [this.ruleForm.provinceId, this.ruleForm.cityId];
      this.ruleForm.time = row.time || "22:00";
      if (row.offLine && row.offLine.indexOf('~') != -1) {
        this.ruleForm.offLine = row.offLine.split('~')
      }
      if(row.transliterationMethod){
        this.projectList.forEach(item=>{
          if(item.code==row.transliterationMethod){
            this.languageList = item.list
          }
        })
      }else{
      }
      this.editFlag = true;
      this.dialogVisible = true;
      this.$forceUpdate();
    },
    // 更换账号
    changeAccount(row) {
      this.changeFlag = true;
      this.passFlag = false;
      this.accountForm.id = row.id;
    },
    changeSure() {
      if (!this.resetFlag) {
        this.$message.error("平台用户与项目用户不能重复添加！");
        return;
      }
      this.$refs.accountForm
        .validate((valid) => {
          if (valid) {
            this.loadingFlag = true;
            this.$api.api.updateManagerPhone(this.accountForm).then((res) => {
              if (res.code == 0) {
                this.changeFlag = false;
                setTimeout(() => {
                  this.loadingFlag = false;
                }, 1);
                this.$message.success("编辑成功");
                this.zkhousePage();
              }
            });
          }
        })
        .catch((err) => {
          this.loadingFlag = false;
        });
    },
    del(row) {
      console.log(row, "删除");
      this.$confirm(`是否删除此项目?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        distinguishCancelAndClose: true,
        type: "warning",
      }).then(() => {
        axios({
          url: `/autoSR/zkhouse/${row.id}`,
          method: "delete",
          // params: {
          //   id: row.id,
          // },
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.zkhousePage();
          } else {
            this.$message.warning(res.resMsg);
          }
        });
      });
    },
    // 时间改变
    timeChange(e) {
      console.log(e);
      this.ruleForm.startWorking = e[0];
      this.ruleForm.endWorking = e[1];
    },
    // 获取公司列表
    getOrgList() {
      this.$api.api
        .getCompanyList({
          orgType: this.orgType,
          agentId: localStorage.getItem("agentId"),
        })
        .then((res) => {
          if (res.code == 0) {
            this.orgList = res.data;
          }
        });
    },
    // 获取运营人员地址
    getAllOperationsStaff() {
      this.$api.api.getAllOperationsStaff().then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.operationList = res.data;
        }
      });
    },
    // 获取项目列表
    zkhousePage() {
      let obj = {
        current: this.page.currentPage,
        size: this.page.pageSize,
        orgType: localStorage.getItem("orgType"),
        agentId: localStorage.getItem("agentId"),
        orgCode: localStorage.getItem("orgCode"),
        operationType:
          localStorage.getItem("orgType") == 0
            ? "1"
            : localStorage.getItem("orgType") == 1
            ? "2"
            : "",
        ...this.searchForm,
      };
      if (this.orgType == 0) {
        obj.residueTime = null;
      }
      this.$api.api.zkhousePage(obj).then((res) => {
        // console.log(res)
        this.tableData = res.data.records;
        this.page.total = res.data.total;

        this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      });
    },
    async getProvinceList(parentId = 0) {
      let _this = this;
      this.addressOptions = [];
      let res = await getAreaList({ parentId });
      // console.log(res);
      // 当他没有值时给addressOptions赋值，这是第一个数组
      if (res.code == 0) {
        // _this.$set(_this, 'addressOptions',_this.ruleForm.cityIds&&_this.ruleForm.provinceId ? this.loadOptions(res.data||[] ):res.data)
        let arr = [];
        res.data.map((item) => {
          let obj = {};
          obj.value = item.id;
          obj.label = item.name;
          obj.leaf = false;
          obj.children = [];
          arr.push(obj);
        });
        this.addressOptions = arr;
        this.loadOptions();
      }
    },
    loadOptions() {
      // console.log(this.addressOptions);
      this.addressOptions.map((item, idx) => {
        if (item.value == this.ruleForm.provinceId) {
          console.log("有匹配项");
          getAreaList({ parentId: this.ruleForm.provinceId }).then((res) => {
            if (res.code == 0) {
              let arr = [];
              res.data.map((item1) => {
                let obj = {};
                obj.value = item1.id;
                obj.label = item1.name;
                obj.leaf = true;
                arr.push(obj);
              });
              this.$set(this.addressOptions[idx], "children", arr);
              // console.log(this.addressOptions[idx], "123");
              this.addressOptions = Object.assign([], this.addressOptions);
              this.area = null;
              setTimeout(() => {
                this.ruleForm.area = [
                  this.ruleForm.provinceId,
                  this.ruleForm.cityId,
                ];
                // console.log(1);
                // console.log(this.addressOptions);
                // console.log(this.area);
                this.$forceUpdate();
              }, 50);
            }
          });
        }
        this.dialogVisible = true;
      });
    },
    empty() {
      this.starTime = [];
      this.searchForm = {
        corporateName: "",
        propertyName: "",
        serviceStatus: "",
        provinceId: "",
        houseType: "",
        timeType: "0",
        // residueTime: 7,
        startWorking: "",
        endWorking: "",
        agentName: "",
        operationalPeople: "",
        operationStaffId: "",
      };
      this.area = [];
      this.page.currentPage = 1;
      this.zkhousePage();
    },
    timeChange1(e) {
      if (e) {
        this.searchForm.startWorking = e[0];
        this.searchForm.endWorking = e[1];
      } else {
        this.searchForm.startWorking = "";
        this.searchForm.endWorking = "";
      }
    },
    tabtimetap(idx) {
      this.searchForm.residueTime = idx;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.zkhousePage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.zkhousePage();
    },
    locationsChange(e) {
      console.log(e);
      if (!e) return;
      this.ruleForm.provinceId = e[0];
      this.ruleForm.cityId = e[1];
    },
    locationsChange1(e) {
      console.log(e);
      if (!e) return;
      this.searchForm.provinceId = e[0];
      this.searchForm.cityId = e[1];
    },
  },
};
</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: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      margin-left: 15px;
      min-width: 100px;
      text-align: right;
    }

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

    .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;
    }
  }
}

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

.div-inp {
  width: 250px;
}
/deep/ .el-table__header-wrapper {
  thead {
    tr {
      th {
        background: #f5f7fa !important;
        color: #333333 !important;
      }
    }
  }
}
/deep/ .el-dialog--center {
  border-radius: 8px;
  .el-dialog__title {
    font-weight: bold;
  }
}
/deep/ .el-button--primary {
  background: #2671e2 !important;
  border: 1px solid #2671e2 !important;
}
/deep/ .el-button--text {
  color: #2671e2;
}
/deep/ .el-button--text {
  color: #2671e2;
}

/deep/.houseType {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-radio {
    margin-right: 0;
  }
}
</style>