zhywpt-web/src/views/onlineBusinessHall/onlineOperation/repositpry/index.vue

<template>
  <div>
    <crud-template
      ref="crudRef"
      class="as-weight"
      :home-data="field"
      :tableData="tableData"
      @btnSearch="btnSearch"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @cancel="cancel"
      @CurrentChange="handleCurrentChange"
      @refreshLeft="refreshLeft"
      @submit="submit"
      @add="Add"
      @importData="handleSuccess"
    >
      <template #search>
        <el-select
          clearable
          v-model="searchForm.serviceType"
          style="width: 180px"
          placeholder="请选择客服类别"
          filterable
        >
          <el-option
            v-for="item in serviceTypeOptinos"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          clearable
          v-model="searchForm.businessType"
          style="width: 180px"
          placeholder="请选择业务类型"
          filterable
        >
          <el-option
            v-for="item in businessTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          maxlength="60"
          v-trim
          clearable
          v-model="searchForm.category"
          style="width: 200px"
          placeholder="请输入类别"
        />
        <el-input
          maxlength="60"
          v-trim
          clearable
          v-model="searchForm.key"
          style="width: 200px"
          placeholder="请输入关键字"
        />
        <el-input
          maxlength="60"
          v-trim
          clearable
          v-model="searchForm.knowledgeId"
          style="width: 200px"
          placeholder="请输入编号"
        />
      </template>
      <template #searchCustomButton>
        <el-button type="primary" @click="handleEmptyFeedback(0)">
          无内容反馈
        </el-button>
      </template>
      <template #operation="{ scope }">
        <el-button
          type="primary"
          size="small"
          @click="handleEmptyFeedback(1, scope)"
        >
          反馈
        </el-button>
      </template>
    </crud-template>
    <FeedBackDialog
      v-model="feedBackShow"
      :serviceTypeOptinos="serviceTypeOptinos"
      :businessTypeList="businessTypeList"
      @handleSubmit="handleSubmit"
      :feedBackType="feedBackType"
    />
  </div>
</template>
<!-- 知识库 -->
<script setup lang="ts">
import { ref, toRaw, onMounted, computed } from 'vue'
// @ts-ignore crudFrom模板
import CrudTemplate from '@/crud/index.vue'
import $storeinitData from '@/store/initData' //引入tab vuex
import BaseService from '@/utils/baseService' //引入接口请求
import { msg, typeTy } from '@/utils/msg' //引入接口请求
import { ElMessage } from 'element-plus' //提示

import { useRoute } from 'vue-router'
import { IsPermission } from '@/router/routerUtil'
import FeedBackDialog from './components/FeedBackDialog.vue'
const route = useRoute()
const crudRef = ref()

//问题类型
let serviceTypeOptinos = [
  {
    label: '一线',
    value: 1,
  },
  {
    label: '二线',
    value: 2,
  },
]

//查询参数
const searchForm = ref<any>({
  serviceType: '', //客服类别
  key: '', //关键字
  category: '', //类别
  businessType: '', //业务类型
  knowledgeId: '', //编号
})
let tableData: any = ref([])
const typeOption = ref('')

onMounted(() => {
  // getList()
  getBusinessType()
})
// 搜索按钮
function btnSearch() {
  field.value.paging.currentPage = 1
  getList()
}
// 编辑按钮
function handleEdit(idx: any, row: any) {
  typeOption.value = 'edit'
}

// 删除按钮
function handleDelete(idx: any, row: any) {
  const data = {
    id: row.id,
  }
  BaseService.post('/managew/knowledgebase/deleteById', data).then(
    (res: any) => {
      if (res && res.code === 0) {
        ElMessage.success('操作成功')
        getList()
        cancel()
      } else {
        ElMessage.error(res.message)
      }
    }
  )
}
//添加
function Add() {
  typeOption.value = 'add'
}
// 取消
function cancel() {
  crudRef.value.reset()
  crudRef.value.dialogFormVisible = false
}
//分页
function handleCurrentChange(val: number) {
  field.value.paging.currentPage = val
  getList()
}

// 搜索重置
function refreshLeft() {
  searchForm.value = {
    problemName: '', //问题内容
    problemType: '', //解决方案
  }
  field.value.paging.currentPage = 1
  getList()
}
//编辑与添加提交
function submit(data: any) {
  let api = '/managew/knowledgebase/add'
  if (typeOption.value === 'edit') {
    api = '/managew/knowledgebase/updateById'
  }
  BaseService.post(api, data).then((res: any) => {
    if (res && res.code === 0) {
      let bizContent = res.data
      ElMessage.success('操作成功')
      getList()
      cancel()
    } else {
      ElMessage.error(res.message)
    }
  })
}
//获取列表
function getList() {
  let errTxt = ''
  if (!searchForm.value.serviceType) {
    errTxt = '客服类别'
  }
  if (!searchForm.value.businessType) {
    errTxt = errTxt ? errTxt + '和' : errTxt
    errTxt += '业务类型'
  }
  if (errTxt) {
    msg(`请选择 ${errTxt} 后再次点击搜索`, typeTy.warning)
    return
  }
  crudRef.value.tableLoding = true
  let params: any = {
    methods: 'page',
    pageNo: field.value.paging.currentPage,
    pageSize: field.value.paging.pageSize,
  }
  let searchFormList = { ...searchForm.value }
  for (let key in searchFormList) {
    if (searchFormList[key]) {
      params[key] = searchFormList[key]
    }
  }
  BaseService.post(
    '/iaw/app/issue/knowledgebase/queryProblemPage',
    params
  ).then((res: any) => {
    if (res && res.code === 0) {
      //数据转换
      let bizContent = res.data
      let data = bizContent.result || []
      //数据渲染
      tableData.value = data
      crudRef.value.tableLoding = false
      //分页总数
      field.value.paging.total = bizContent.totalCount
      console.log(bizContent, 'getList')
    } else {
      crudRef.value.tableLoding = false
      ElMessage.error(res.message)
    }
  })
}
//获取所有业务类型
const businessTypeList = ref<any>([])
function getBusinessType() {
  BaseService.post('/iaw/app/issue/knowledgebase/getBusinessType', {}).then(
    (res: any) => {
      if (res && res.code === 0) {
        //数据转换
        let bizContent = res.data
        businessTypeList.value = bizContent.map((item) => {
          return {
            label: item,
            value: item,
          }
        })
        console.log(bizContent, 'bizContent')
      } else {
        crudRef.value.tableLoding = false
        ElMessage.error(res.message)
      }
    }
  )
}
const feedBackShow = ref(false)
const feedBackType = ref(0)
const currentData = ref({})
// 无内容反馈
function handleEmptyFeedback(keys, scope) {
  feedBackType.value = keys
  feedBackShow.value = true
  if (keys === 1) {
    currentData.value = scope.row
  }
}
function handleSubmit(data) {
  if (feedBackType.value === 0) {
    getFeedBackNo(data)
  } else {
    getFeedBack(data)
  }
}
function getFeedBackNo(data) {
  BaseService.post('/iaw/app/issue/knowledgebase/addFeedBackNo', data).then(
    (res: any) => {
      if (res && res.code === 0) {
        ElMessage.success('操作成功')
        feedBackShow.value = false
        getList()
        cancel()
      } else {
        ElMessage.error(res.message)
      }
    }
  )
}
function getFeedBack(data) {
  let params = {
    ...data,
    knowledgeId: currentData.value.knowledgeId,
  }
  BaseService.post('/iaw/app/issue/knowledgebase/addFeedBack', data).then(
    (res: any) => {
      if (res && res.code === 0) {
        ElMessage.success('操作成功')
        feedBackShow.value = false

        getList()
        cancel()
      } else {
        ElMessage.error(res.message)
      }
    }
  )
}

//表单数据配置
let field = ref({
  border: true, //是否添加边框(默认false)
  searchShow: IsPermission(route, 'QUERY_BASE'), //搜索展示
  paginStart: true, //是否显示分页查询 (默认false)
  operateTitle: '操作', //操作栏标题(默认为"")
  operate: {
    edit: false, //是否编辑(默认true)
    delete: IsPermission(route, 'DEL_LIST'), //是否删除(默认true)
    info: IsPermission(route, 'INFO_LIST'), // 详情
    remark: false, // 详情
    announcement: false, // 公告
    forbidden: false, // 禁用
    enable: false, // 启用
    authorization: false, // 授权
    cancel: false, // 取消订单
    isToLead: true, // 导入
  },
  searchOperation: {
    isToLead: true, //导入
    isTemplate: true,
    uploadBtnName: '导入',

    templateUrl:
      import.meta.env.VITE_APP_UPLOAD_URL +
      'sett-minio/template/线上营业厅/知识库问题导入模板.xlsx',
    templateFileName: '知识库问题导入模板',
  },
  crud: {
    add: IsPermission(route, 'ADD_BASE'),
  },
  tableSize: -1,
  paging: {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  },
  extend: [
    {
      label: '序号',
      type: 'index',
      width: '80px',
    },
  ],
  field: [
    {
      prop: 'serviceType',
      label: '客服类别',
      listData: serviceTypeOptinos,
      form: {
        type: 'input',
        required: true,
        listData: serviceTypeOptinos,
      },
    },

    {
      prop: 'businessType',
      label: '业务类型',
      listData: businessTypeList,
      form: {
        type: 'input',
        required: true,
        listData: businessTypeList,
      },
    },
    {
      prop: 'category',
      label: '类别',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level4',
      label: 'level4',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level5',
      label: 'level5',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level6',
      label: 'level6',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level7',
      label: 'level7',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level8',
      label: 'level8',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level9',
      label: 'level9',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level10',
      label: 'level10',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level11',
      label: 'level11',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level12',
      label: 'level12',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level13',
      label: 'level13',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level14',
      label: 'level14',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level15',
      label: 'level15',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level16',
      label: 'level16',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level17',
      label: 'level17',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level18',
      label: 'level18',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level19',
      label: 'level19',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level20',
      label: 'level20',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level21',
      label: 'level21',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level22',
      label: 'level22',
      form: {
        type: 'input',
        required: true,
      },
    },
    {
      prop: 'level23',
      label: 'level23',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level24',
      label: 'level24',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level25',
      label: 'level25',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level26',
      label: 'level26',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level27',
      label: 'level27',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level28',
      label: 'level28',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level29',
      label: 'level29',
      form: {
        type: 'input',
        // required: true,
      },
    },
    {
      prop: 'level30',
      label: 'level30',
      form: {
        type: 'input',
        // required: true,
      },
    },
  ],
})
/***********上传下载**************/
import { importFn } from '@/views/settlement/exportFn'
// 文件上传到minio后触发
const handleSuccess = (excelFileUrl: any, reportFileName: any) => {
  importFn(
    '/managew/knowledgebase/importSchemeFile',
    () => {
      getList()
    },
    {
      url: excelFileUrl,
    }
  )
}
</script>
<style lang="scss" scoped></style>