dvcp_v2_webapp/packages/xbot/AppSensitiveXbot/components/List.vue

<template>
  <section class="list">
    <ai-list>
      <template slot="title">
        <ai-title title="敏感词触发" isShowBottomBorder></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <!-- <ai-area-get
              style="width: 180px;"
              placeholder="请选择地区"
              :instance="instance"
              v-model="search.areaId"
              @select="onAreaChange"/> -->
            <el-cascader ref="cascader1" clearable v-model="departIdList" :options="girdOptions" placeholder="所属部门" size="small"
              :props="defaultProps" :show-all-levels="false" @change="gridChange"></el-cascader>
              <ai-select v-model="search.type" placeholder="会话类型" @change="current=1, getTableData()"
            :selectList="dict.getDict('appSessionType')"/>
            <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
            </el-date-picker>
          </template>
          <template #right>
            <el-input size="small" placeholder="敏感词、涉及对象、姓名、手机号" v-model="search.content" clearable
              @clear="current = 1, search.content = '', getTableData()" suffix-icon="iconfont iconSearch"
              v-throttle="() => {(current = 1), getTableData();}"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
                  @getList="getTableData()" :col-configs="colConfigs" :dict="dict">
          <el-table-column slot="options" label="操作"  align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </section>

</template>

<script>
import { mapState } from "vuex";
export default {
  name: "list",
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      search: {
        content: '',
        departmentId: '',
        current: 1,
        size: 10,
        areaId: '',
        type: ''
      },
      departIdList: [],
      tableData: [],
      size: 10,
      total: 0,
      current: 1,
      girdOptions: [],
      defaultProps: {
        label: 'name',
        value: 'id',
        checkStrictly: true,
      },
      flag: false,
      time: null
    }
  },
  created() {
    this.$dict.load('appSessionType').then(() => {
      this.getTableData()
    })
    this.getGridList()
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        { prop: "wordName", label: '触发敏感词', align: "left"},
        { prop: "type", label: '会话类型', dict: 'appSessionType'},
        // { prop: "areaName", label: '行政区划'},
        { prop: "departmentName", label: '部门'},
        { prop: "toName", label: '涉及对象'},
        { prop: "userName", label: '姓名'},
        { prop: "phone", label: '手机号'},
        { prop: "createTime", label: '日期', width:220},
        { slot: "options" },
      ]
    },
  },
  methods: {
    getTableData() {
      this.instance.post(`/app/appsessionarchivekeywordrecord/listForXbot`,null,{
        params: {
          ...this.search,
          current: this.current,
          size: this.size,
          total: this.total,
          startTime: this.time && this.time.length ? this.time[0] : '',
          endTime: this.time && this.time.length ? this.time[1] : ''
        }
      }).then(res => {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    onAreaChange () {
      this.search.current = 1

      this.$nextTick(() => {
        this.getTableData()
      })
    },

    onChange(e) {
      this.time = e
      this.getTableData()
    },

    selectPerson(val) {
      console.log(val)
      if (val) {
        this.personList = val
        this.form.ids = [...this.personList.map(e => e.sysUserId)]
      } else {
        this.form.ids = this.chooseUserList.map(e => e.sysUserId)
      }
    },

    getGridList() {
      this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
        if (res.code == 0) {
          this.girdOptions = this.toTree(res.data)
        }
      })
    },

    // 转树形结构
    toTree(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result
      }
      let map = {};
      data.forEach(item => {
        map[item.id] = item;
      });
      data.forEach(item => {
        let parent = map[item.parentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },

    gridChange(val) {
      this.departIdList = val
      this.search.departmentId = val?.[val.length - 1]
      this.$refs.cascader1.dropDownVisible = false;
      this.getTableData()
    },

    toDetail(row) {
      this.$emit('change', {
        type: 'Detail',
        params:row
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;

  :deep( .ai-dialog .ai-dialog__content ){
    max-height: 600px!important;
  }



  .userlist {
    display: inline-block;
  }

  .userlist, .user {
    display: inline-block;
  }

  .user {
    position: relative;
    width: 70px;
    text-align: center;

    .remove-icon {
      position: absolute;
      right: 7px;
      top: -4px;
      line-height: 1;
      padding: 6px 0;
      font-size: 16px;
      cursor: pointer;

      &:hover {
        color: crimson;
      }
    }

    img, h2 {
      display: block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 0 auto 4px;
      font-size: 14px;
      color: #fff;
      border-radius: 50%;
    }

    h2 {
      background-color: $primaryColor;
    }

    span {
      color: #666;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
    }
  }

  :deep( .selectCont .pagination ){
    width: 100%!important;
    background: pink;
  }
}
</style>