oil-station/fuintAdmin/src/views/staff/list.vue

<template>
  <div class="app-container">
<!--    搜索-->
    <el-card >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="queryParams.realName"
            placeholder="请输入姓名"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入手机号"
            clearable
            style="width: 240px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="auditedStatus">
          <el-select
            v-model="queryParams.status"
            placeholder="状态"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.zhzt"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
<!--          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>-->

        </el-form-item>
      </el-form>
    </el-card>

<!--    列表信息-->
    <el-card style="margin-top: 20px" >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增员工</el-button>
        </el-col>
<!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>

      <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
        <el-table-column type="index" width="80" align="center" label="序号"/>
        <el-table-column label="姓名" align="center" prop="realName" />
        <el-table-column label="员工角色" align="center" prop="dutyName" >
          <template slot-scope="scope">
            <span>{{scope.row.dutyName || "--"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="mobile"  width="110"/>

        <el-table-column label="员工码" align="center" prop="staffCode">
          <template slot-scope="scope">
            <span @click="getStaffQRcode(scope.row.id)">
              <svg t="1701161298120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306" width="16" height="16"><path d="M384 64l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2c0 51.2 41.6 89.6 89.6 89.6l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2C473.6 105.6 435.2 64 384 64zM428.8 380.8c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8l0-227.2c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8L428.8 380.8z" p-id="4307"></path><path d="M192 192l134.4 0 0 134.4-134.4 0 0-134.4Z" p-id="4308"></path><path d="M377.6 544l-243.2 0c-48 0-86.4 38.4-86.4 89.6l0 220.8c0 48 38.4 89.6 86.4 89.6l243.2 0c48 0 86.4-38.4 86.4-89.6l0-220.8C467.2 582.4 425.6 544 377.6 544zM422.4 851.2c0 25.6-19.2 44.8-44.8 44.8l-243.2 0c-25.6 0-44.8-19.2-44.8-44.8l0-220.8c0-25.6 19.2-44.8 44.8-44.8l243.2 0c25.6 0 44.8 19.2 44.8 44.8L422.4 851.2z" p-id="4309"></path><path d="M192 668.8l131.2 0 0 131.2-131.2 0 0-131.2Z" p-id="4310"></path><path d="M633.6 470.4l249.6 0c51.2 0 89.6-41.6 89.6-89.6l0-227.2c0-51.2-41.6-89.6-89.6-89.6l-249.6 0c-51.2 0-89.6 41.6-89.6 89.6l0 227.2C544 432 585.6 470.4 633.6 470.4zM588.8 153.6c0-25.6 19.2-44.8 44.8-44.8l249.6 0c25.6 0 44.8 19.2 44.8 44.8l0 227.2c0 25.6-19.2 44.8-44.8 44.8l-249.6 0c-25.6 0-44.8-19.2-44.8-44.8L588.8 153.6z" p-id="4311"></path><path d="M700.8 192l134.4 0 0 134.4-134.4 0 0-134.4Z" p-id="4312"></path><path d="M572.8 716.8l137.6 0c12.8 0 22.4-9.6 22.4-22.4l0-137.6c0-12.8-9.6-22.4-22.4-22.4l-137.6 0c-12.8 0-22.4 9.6-22.4 22.4l0 137.6C550.4 707.2 560 716.8 572.8 716.8z" p-id="4313"></path><path d="M886.4 563.2l0 38.4c0 12.8 12.8 25.6 25.6 25.6l38.4 0c12.8 0 25.6-12.8 25.6-25.6l0-38.4c0-12.8-12.8-25.6-25.6-25.6l-38.4 0C899.2 537.6 886.4 547.2 886.4 563.2z" p-id="4314"></path><path d="M582.4 944l48 0c12.8 0 22.4-9.6 22.4-22.4l0-48c0-12.8-9.6-22.4-22.4-22.4l-48 0c-12.8 0-22.4 9.6-22.4 22.4l0 48C560 934.4 569.6 944 582.4 944z" p-id="4315"></path><path d="M944 704l-99.2 0c-16 0-28.8 12.8-28.8 28.8l0 44.8-48 0c-19.2 0-32 12.8-32 32l0 99.2c0 16 12.8 28.8 28.8 28.8l179.2 3.2c16 0 28.8-12.8 28.8-28.8l0-179.2C972.8 716.8 960 704 944 704z" p-id="4316"></path></svg>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="员工状态" align="center" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status=='qy'">启用</el-tag>
            <el-tag type="info" v-if="scope.row.status=='jy'">禁用</el-tag>
          </template>
        </el-table-column>

<!--        </el-table-column>-->
        <el-table-column label="一键加油" align="center" prop="isRefuel">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.display" :value="scope.row.isRefuel"/>
          </template>
        </el-table-column>
        <el-table-column label="收款通知" align="center" prop="notice">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.notice" :value="scope.row.notice"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
<!--        <el-table-column label="更新时间" align="center" prop="updateTime" width="150">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.updateTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="binding(scope.row)"

            >一键绑定</el-button>

              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="nobinding(scope.row)"
                v-if="scope.row.tagStatus == 1"
              >解绑</el-button>


            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入姓名" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系人电话" maxlength="30"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="角色组" prop="roleId">
              <el-select v-model="form.roleId" placeholder="请选择角色">
                <el-option
                  v-for="item in roleList"
                  :key="item.dutyId+''"
                  :label="item.dutyName"
                  :value="item.dutyId+''"
                ></el-option>

              </el-select>
            </el-form-item>
          </el-col>
<!--        </el-row>-->
<!--        <el-row>-->
          <el-col :span="8">
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="form.password" type="password" @input="changePassword" placeholder="不填写默认：123456" maxlength="30"/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="一键加油" prop="isRefuel">
              <el-select v-model="form.isRefuel">
                <el-option
                  v-for="dict in dict.type.display"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <br/>
              <el-tooltip
                class="item"
                effect="dark"
                placement="bottom">
                <div slot="content">加油时选择加油员场景使用,选择不显示加油员将无法被指定<br/>(需系统开启加油选择加油员功能)终端支持:(PC、POS、小程序)</div>
                <span>加油时选择加油员场...</span>
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="收款通知" prop="notice">
              <el-select v-model="form.notice">
                <el-option
                  v-for="dict in dict.type.notice"
                  v-if="dict.value!='zdyx'"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <br/>
              <el-tooltip
                class="item"
                effect="dark"
                placement="bottom">
                <div slot="content"> 收款成功接收的公众号模板消息通知,需<br/>关注公众号,且本站小程序中会员手机号<br/>信息与当前员工手机号一致 </div>
                <span>收款成功接收的...</span>
              </el-tooltip>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="账号状态" prop="status">
              <el-select v-model="form.status">
                <el-option
                  v-for="dict in dict.type.zhzt"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <br/>
              <el-tooltip
                class="item"
                effect="dark"
                placement="bottom">
                <div slot="content"> 状态禁用后,当前账号则无法进行<br/>登录和操作</div>
                <span>状态禁用后,当前账号...</span>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="审核权限">
              <el-select
                v-model="auditPrem"
                multiple
                collapse-tags
                @change="getCheckbox"
                placeholder="请选择">
                <el-checkbox style="margin-left: 100px" :checked="checked" v-model="checked" @change='selectAll'>全选</el-checkbox>
<!--                <el-option-->
<!--                  v-for="dict in dict.type.shqx"-->
<!--                  :key="dict.label"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.label"-->
<!--                >-->
                <el-option
                  v-for="dict in shqxList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictLabel"
                >
                </el-option>
              </el-select>
              <br/>
              <el-tooltip
                class="item"
                effect="dark"
                placement="bottom">
                <div slot="content">可设置当前员工是否有油品/商品入库、盘点、审核废止等权限</div>
                <span>可设置当前员工是否有...</span>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input v-model="form.description" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      style="margin-top: 100px"
      width="23%">
      <div style="text-align: center">
        <img id="qrCodeImg" class="qrcode" :src="baseUrl+imgUrl" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDownloadqrCode('qrCodeImg')">保存图片到电脑</el-button>
      </span>
    </el-dialog>
    <el-dialog title="码牌列表" :visible.sync="openShow" width="800px" append-to-body>

      <div class="wrap-box">
        <div  class="gang-box">
          <div class="rw">
            序号
          </div>
          <div class="rw">
            厂商名称
          </div>
          <div class="rw">
            二维码ID
          </div>
          <div class="rw">
            码牌SN号
          </div>
          <div class="rw">
            操作
          </div>
        </div>
        <div class="gang-box" :class="{'oilid' :oilid == item.id }" v-for="(item,index) in arrList" :key="index">
<!--          <el-table-column label="厂商名称" align="center" width="110">-->
<!--            <template slot-scope="item">-->
<!--              <span>{{item.companyName || ''}}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="二维码SN号" align="center" width="110">-->
<!--            <template slot-scope="item">-->
<!--              <span>{{item.tagCodeSn|| ''}}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="码牌SN号" align="center" width="110">-->
<!--            <template slot-scope="item">-->
<!--              <span>{{item.snCode|| ''}}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <div class="rw">
            {{index+1}}
          </div>
          <div class="rw">
            {{item.companyName}}
          </div>
          <div class="rw">
            {{item.tagCodeSn}}
          </div>
          <div class="rw">
            {{item.snCode}}
          </div>
          <div style="width: 25%; text-align: center; color: #00afff;cursor: pointer;" v-if="oilid != item.id" @click="getoil(item.id)">
            选择
          </div>
          <div style="width: 25%; text-align: center; color: #adadad;cursor: pointer;" v-if="oilid == item.id">
            已选择
          </div>
        </div>
      </div>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="yesyesyes">确定绑定</el-button>
        <el-button @click="openShow=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import {getName} from "../../utils/fuint";
import {
  addStaff,
  createStaffQrCode,
  delStaff,
  getStaff,
  listStaff, puttagCodeRecord,
  queryStaff,
  tagCodeRecord, tagCodeRecordStaff,
  updateStaff
} from "@/api/staff/staff";
import {getDuty, listDuty} from "@/api/staff/duty";
import html2canvas from "html2canvas";
import {getDicts} from "@/api/order/data";
import {dutyList, dutyLists} from "@/api/duty/duty";

export default {
  name: "StaffList",
  dicts: ['ywqx','write_off','display','zhzt','transaction','time_frame','handover','handover_quit',
    'jbjl','official','notice','special_prem','role','shqx','staff_role'],
  data() {
    return {
      // 二维码类型
      type:"",
      checked:false,
      openShow:false,
      arrList:[],
      oilid:null,
      staffId:null,
      // 二维码图片url
      imgUrl:"",
      // 角色列表
      roleList:[],
      drawer: false,
      dialogVisible: false,
      baseUrl:process.env.VUE_APP_BASE_API,
      // 标题
      title: "",
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      storeOptions: [],
      shqxList: [],
      // role:[],
      posPrem:'',
      posOptions:[
        {value: '首页权限',label: '首页权限',
          children:[
            {value: '禁用普通收款', label: '禁用普通收款' },
            {value: '禁用会员收款', label: '禁用会员收款' },
            {value: '禁用新增会员', label: '禁用新增会员' },
            {value: '禁用订单记录', label: '禁用订单记录' },
            {value: '禁用员工交班', label: '禁用员工交班' },
          ]},
        {value: '会员储值',label: '会员储值',children:[{value: '禁止会员充值', label: '禁止会员充值' },]},
        {value: '会员实体卡',label: '会员实体卡',children:[{value: '禁止绑卡换卡', label: '禁止绑卡换卡' },]},
        {value: '会员积分',label: '会员积分',children:[{value: '增加', label: '增加' },{value: '减少', label: '减少' },]},
        {value: '加油金变动',label: '加油金变动',children:[{value: '增加', label: '增加' },{value: '减少', label: '减少' },]},
        {value: '会员卡券',label: '会员卡券',
          children:[
            {value: '优惠券赠送', label: '优惠券赠送' },
            {value: '兑换券赠送', label: '兑换券赠送' },
          ]},
        {value: '会员成长值',label: '会员成长值',
          children:[
            {value: '成长值增加', label: '成长值增加' },
            {value: '成长值减少', label: '成长值减少' },
          ]},
      ],
      props: { multiple: true },
      appletPrem:'',
      appletOptions:[
        {value: '交易',label: '交易',children:[{value: '油品交易', label: '油品交易' },]},
        {value: '库存',label: '库存',
          children:[
            {value: '库存盘点', label: '库存盘点' },
            {value: '库存查询', label: '库存查询' },
          ]},
        {value: '核销',label: '核销',
          children:[
            {value: '扫码核销', label: '扫码核销' },
            {value: '核销记录', label: '核销记录' },
          ]},
      ],
      writeOff:[],
      write:[],
      specialPrem:[],
      auditPrem:[],
      special:[],
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: {prop: 'createTime', order: 'descending'},
      // 表单参数
      form: {
        id:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:'', auditedStatus:'',
        auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'jbtc', record:'qbjl',
        merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'advice_jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
        transaction:'qbjy', writeOff:'',auditPrem:'',specialPrem:'', official:'', status:'qy',pos:'jy',roleId:''
      },
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        realName: '',
        mobile: '',
        status: ''
      },
      ifEditPassword:false,
      // 表单校验
      rules: {
        realName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { min: 2, max: 30, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { min: 6, max: 13, message: '手机号不正确', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: "请选择员工角色", trigger: "blur" }
        ],
        isRefuel: [
          { required: true, message: "请选择加油状态", trigger: "blur" }
        ],
        pos: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        transaction: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        notice: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        timeFrame: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        handoverMode: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        handoverPrem: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        handoverOut: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        record: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        merchantStatus: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        screen: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    //
    // this.getDuty();
    // this.getStoreList();
  },
  methods: {
    binding(row){
      this.staffId = row.id
      this.openShow = true
      this.gettagCodeRecord()
    },
    nobinding(row){
      let data = {
        staffId:row.id
      }
      puttagCodeRecord(data).then(res=>{

        this.$modal.msgSuccess(res.data);
      })
    },

    yesyesyes() {
      let data = {
        oilTagId: this.oilid,
        staffId:this.staffId
      }
      tagCodeRecordStaff(data).then(res=>{
        if(res.code == 200){
          this.oilid = null
          this.staffId = null
          this.openShow = false
          this.$modal.msgSuccess("绑定成功");
        }
        console.log(res)
      })
    },
    getoil(id){
      this.oilid = id
    },
    gettagCodeRecord(){
      tagCodeRecord().then(res=>{

        this.arrList =  res.data.records
      })
    },
    selectAll(val){
      this.auditPrem = []
      if (val) {
        this.shqxList.forEach((item) => {
          this.auditPrem.push(item.dictLabel)
          this.form.auditPrem = this.auditPrem.toString();
        })
      } else {
        this.auditPrem = []
        this.form.auditPrem = ""
      }
    },
    getAuditPrem(){
      getDicts("shqx").then(res => {
        this.shqxList = res.data
      })
    },
    // 获取员工码
    getStaffQRcode(id){
      createStaffQrCode(id).then(res => {
        if (res.code==200){
          this.title = "员工二维码"
          this.dialogVisible = true
          this.imgUrl = res.data
        }
      })
    },
    // 根据字符串获取二维码图片url地址
    getQRcode(code,name){
      this.type = name;
      let opts = {
        errorCorrectionLevel: "L",//容错级别
        type: "image/png",//生成的二维码类型
        quality: 0.3,//二维码质量
        margin: 0,//二维码留白边距
        width: 180,//宽
        height: 180,//高
        text: "http://www.xxx.com",//二维码内容
        color: {
          dark: "#666666",//前景色
          light: "#fff"//背景色
        }
      };
      //this.QRlink 生成的二维码地址url
      QRCode.toDataURL(code, opts , (err, url) => {
        if (err) throw err
        //将生成的二维码路径复制给data的QRImgUrl
        this.imgUrl = url
      })
      if (name=="woc"){
        this.title = "核销二维码"
      }else {
        this.title = "员工二维码"
      }
      this.dialogVisible = true
    },
    // 根据dom生成图片并下载到本地
    handleDownloadqrCode(id) {
      html2canvas(document.getElementById(id)).then((canvas) => {
        let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
        let a = document.createElement('a')
        a.href = imgUrl;
        a.download = "员工二维码"; //文件名
        document.body.appendChild(a);
        a.click(); // 触发点击
        document.body.removeChild(a); // 然后移除
      }).catch(err => {
        console.log(err)
      });
    },
    showDesc(){
      this.drawer = true;
    },
    handleNodeClick1(data) {
      this.form.posPrem = JSON.stringify(data);
    },
    handleNodeClick2(data) {
      this.form.appletPrem = JSON.stringify(data);
    },
    getCheckbox(val){
      console.log("this.auditPrem.toString()",this.auditPrem.toString())
      // this.form.writeOff = this.writeOff.toString();
      // this.form.specialPrem = this.specialPrem.toString();
      this.form.auditPrem = this.auditPrem.toString();
      if (val.length === this.shqxList.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    // 页面跳转
    toTarget(url) {
      this.$router.push( { path: url } );
    },
    getName,
    // 查询列表
    getList() {
      this.loading = true;
      listStaff(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
        }
      );
    },
    // 查询角色列表
    getDuty(){
      listDuty().then(response => {
        this.roleList = response.data
      })
    },
    // 店铺列表
    getStoreList() {
      listStaff().then(response => {
          this.storeOptions = response.data.records;
        }
      );
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
      this.handleQuery();
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.auditedStatus == "A" ? "启用" : "禁用";
      this.$modal.confirm('确认要' + text + '"' + row.realName + '"吗？').then(function() {
          // return updateStaffStatus(row.id, row.auditedStatus);
        return updateStaff({id:row.id, auditedStatus:row.auditedStatus})
      }).then(() => {
          this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
          row.auditedStatus = row.auditedStatus === "A" ? "A" : "N";
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.operId)
      this.multiple = !selection.length
    },
    // 排序触发事件
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
    // 新增按钮操作
    async handleAdd() {
      this.reset();
      await this.getAuditPrem()
      this.getRoleList1()
      this.open = true;
      this.title = "新增员工";
    },
    // 获取角色信息
    getRoleList1() {
      let data = {
        page:1,
        pageSize:10000,
        dutyType:3
      }
      dutyList(data).then(res => {
        this.roleList = res.data.records
      })
    },
    // 表单重置
    reset() {
      this.posPrem = '';
      this.appletPrem = '';
      this.writeOff = [];
      this.form.auditPrem = [];
      this.auditPrem = []

      this.form = {
        id:'', userId:'', mobile:'', realName:'', wechat:'', merchantId:'', storeId:'', auditedStatus:'A',
        auditedTime:'', description:'', isRefuel:'yc', handoverMode:'dqmdtyjb', handoverPrem:'yqx', handoverOut:'jbtc', record:'qbjl',
        merchantStatus:'qy',screen:'qy', posPrem:'', appletPrem:'', notice:'advice_jy', oilGunId:'', timeFrame:'bx', refund:'yqx',
        transaction:'qbjy', writeOff:'',auditPrem:'',specialPrem:'', official:'', status:'qy',pos:'jy',roleId:''
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.checked = false;
      this.reset();
    },
    changePassword(){
      this.ifEditPassword = true
    },
    // 提交按钮
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.auditPrem){
            this.form.auditPrem = this.form.auditPrem.toString();
          }
          if (!this.form.id) {
            queryStaff({mobile:this.form.mobile}).then( response => {
              if(response.data){
                this.$modal.msgError("手机号已存在");
              }else {
                this.form.posPrem = JSON.stringify(this.form.posPrem);
                this.form.appletPrem = JSON.stringify(this.form.appletPrem);
                addStaff(this.form).then(response => {
                  if (response.data==1){
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.checked = false;
                    this.getList();
                  }else {
                    this.$modal.msgError("新增失败");
                  }
                });
              }
            })
          } else {
            if (!this.ifEditPassword){
              this.form.password = ""
            }
            updateStaff(this.form).then(response => {
              if (response.data==1){
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.checked = false;
                this.getList();
              }else {
                this.$modal.msgError("手机号已存在");
              }

            });
          }
        }
      });
    },
    // 修改按钮操作
    async handleUpdate(row) {
      this.reset();
      this.open = true;
      const id = row.id || this.ids;
      await this.getAuditPrem()
      await getStaff(id).then(response => {
        this.form = response.data;
        this.form.password = '123456'
        // this.form.refundPassword = '123456'
        this.open = true;
        this.title = "编辑员工信息";
        if (this.form.auditPrem && this.form.auditPrem.length > 0){
          // this.form.auditPrem = this.form.auditPrem.split(",");
          this.auditPrem = []
          this.auditPrem = this.form.auditPrem.split(",");
          console.log("this.form.auditPrem",this.auditPrem)
          if (this.auditPrem.length === this.shqxList.length) {
            this.checked = true
          } else {
            this.checked = false
          }
        }
        if (this.writeOff.length > 0){
          this.writeOff = this.form.writeOff.split(",");
        }
        if (this.specialPrem.length > 0){
          this.specialPrem = this.form.specialPrem.split(",");
        }
        if (this.posPrem != null && this.posPrem != ""){
          this.posPrem = JSON.parse(this.form.posPrem);
        }
        if (this.appletPrem != null && this.appletPrem != ""){
          this.appletPrem = JSON.parse(this.form.appletPrem);
        }
        this.getRoleList1();
      });
    },
    // 删除按钮操作
    handleDelete(row) {
      const name = row.realName || this.id;
      this.$modal.confirm('是否确认删除"' + name + '"的员工信息？').then(function() {
        return delStaff(row.id);
      }).then(() => {
        this.queryParams.page = 1
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }
  }
};
</script>

<style scoped>
  .app-container{
    width: 100%;
    height: 100%;
    background: #f6f8f9;
  }
  .pagin-box{
    background: white;
    box-sizing: border-box;
    padding: 20px;
  }
  .baoguo{
    background: white;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 20px;
  }
  .qrcode{
    width: 80%;
    margin: 0 auto;
    margin-top: 15px;
  }
  .wrap-box{

    width: 100%;
    height: 300px;
    overflow: auto;
    margin: 10px auto;
  }
  .gang-box{
    box-sizing: border-box;
    padding: 10px 0px;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .oilid{
    background: #f6f8f9 !important;
  }
  .rw{
    width: 25%;
    text-align: center;
  }
</style>