4dkk_mp/src/views/operate/userFeedback.vue

<template>
  <div>
    <div class="score m-4 bg-white">
      <a-collapse v-model:activeKey="activeKey" ghost :bordered="false">
        <a-collapse-panel key="1" header="硬件产品评分" ghost :bordered="false">
          <GrowCard :loading="loading" class="enter-y" :list="score.hardware" />
        </a-collapse-panel>
        <a-collapse-panel key="2" header="软件产品评分">
          <GrowCard :loading="loading" class="enter-y" :list="score.software" />
        </a-collapse-panel>
      </a-collapse>
      <!-- <div class="scoreTitle text-base">硬件产品评分</div>
      <div class="scoreList">
        <GrowCard :loading="loading" class="enter-y" :list="score.hardware" />
      </div>
      <div class="scoreTitle text-base">软件产品评分</div>
      <div class="scoreList">
        <GrowCard :loading="loading" class="enter-y" :list="score.hardware" />
      </div> -->
    </div>
    <BasicTable @register="registerTable" @editEnd="editEnd">
      <template #toolbar>
        <a-button type="primary" v-if="getCheckPerm('recruit-add')" @click="router.push('/operate/configuration')"> 选项配置 </a-button>
        <a-button type="primary" v-if="getCheckPerm('recruit-add')" @click="downTemplate({})"> 导出 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          stopButtonPropagation
          :actions="[
            {
              label: record.status == 0 ? '处理' : '查看',
              //icon: 'ep:edit',
              //ifShow: record.state == 0,
              onClick: handleEdit.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <addRecruitModal @register="register" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h, ref, onMounted, reactive } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, FormProps } from '/@/components/Table';
  import { Time } from '/@/components/Time';
  import {
    getAllByTypeId,
    getScoreAug,
    getfeedbackList,
    employNoteIsTop,
    NewPublicNews,
    employNoteIsPush,
    employNoteDelete,
    downTemplate,
  } from '/@/api/operate';
  import { useModal } from '/@/components/Modal';
  import GrowCard from './components/GrowCard.vue';
  import { Descriptions } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Switch } from 'ant-design-vue';
  import addRecruitModal from './components/config/messgeModal.vue';
  import { useRouter } from 'vue-router';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { Collapse } from 'ant-design-vue';
  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      addRecruitModal,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      GrowCard,
      [Collapse.name]: Collapse,
      [Collapse.Panel.name]: Collapse.Panel,
      
    },
    setup() {
      const { t } = useI18n();
      const { createMessage } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [register, { openModal }] = useModal();
      const router = useRouter()
      const loading = ref(true);
      const score = ref({
        hardware: [],
        software: [],
      });
      const activeKey = ref([]);
      const fileFlow = reactive({
        file: null,
      });
      const columns: BasicColumn[] = [
        {
          title: '问题描述',
          dataIndex: 'problemDesc',
          ellipsis: true,
          align: 'left',
          width: 250,
        },
        {
          title: '硬件产品',
          dataIndex: 'hardwareOption',
          ellipsis: true,
          width: 150,
          customRender: ({ record }) => {
            return record.hardwareOption?.nameCn;
          },
        },
        {
          title: '软件产品',
          dataIndex: 'softwareOption',
          ellipsis: false,
          width: 200,
          customRender: ({ record }) => {
            return record.softwareOption?.nameCn;
          },
        },
        {
          title: '所在行业',
          dataIndex: 'industryOption',
          width: 150,
          customRender: ({ record }) => {
            return record.industryOption?.nameCn;
          },
        },
        {
          title: '期望解决方案',
          dataIndex: 'solution',
          width: 150,
        },
        {
          title: '姓名',
          dataIndex: 'nickName',
          width: 80,
        },
        {
          title: '联系方式',
          dataIndex: 'phone',
          width: 120,
        },
        {
          title: '国家和地区',
          dataIndex: 'address',
          width: 120,
        },
        {
          title: '评分',
          dataIndex: 'score',
          width: 50,
        },
        {
          title: '评分理由',
          dataIndex: 'scoreReason',
          width: 150,
        },
        {
          title: '反馈时间',
          dataIndex: 'createTime',
          width: 150,
          customRender: ({ record }) => {
            return (
              record.createTime &&
              h(Time, {
                value: record.createTime,
                mode: 'datetime',
              })
            );
          },
        },
        {
          title: '处理状态',
          dataIndex: 'status',
          width: 80,
          customRender: ({ record }) => {
            return record.status == 0 ? '未处理' : '已处理';
          },
        },
        {
          title: '处理结果',
          dataIndex: 'result',
          width: 120,
          customRender: ({ record }) => {
            return record.result || '-';
          },
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter: true,
        autoAdvancedLine: 1,
        schemas: [
          {
            field: 'hardwareOptionId',
            component: 'ApiSelect',
            label: '硬件产品',
            itemProps: {
              validateTrigger: 'blur',
            },
            componentProps: {
              api: getAllByTypeId,
              numberToString: true,
              labelField: 'nameCn',
              valueField: 'id',
              immediate: true,
              params: 2,
            },
            colProps: {
              xl: 6,
              xxl: 8,
            },
          },
          {
            field: 'softwareOptionId',
            component: 'ApiSelect',
            label: '软件产品',
            itemProps: {
              validateTrigger: 'blur',
            },
            componentProps: {
              api: getAllByTypeId,
              numberToString: true,
              labelField: 'nameCn',
              valueField: 'id',
              immediate: true,
              params: 3,
            },
            colProps: {
              xl: 6,
              xxl: 8,
            },
          },
          {
            field: 'industryOptionId',
            component: 'ApiSelect',
            label: '所在行业',
            itemProps: {
              validateTrigger: 'blur',
            },
            componentProps: {
              api: getAllByTypeId,
              numberToString: true,
              labelField: 'nameCn',
              valueField: 'id',
              immediate: true,
              params: 1,
            },
            colProps: {
              xl: 6,
              xxl: 8,
            },
          },
          {
            field: 'status',
            label: '处理状态',
            component: 'Select',
            componentProps: {
              options: [
                { label: '未处理', value: '0' },
                { label: '已处理', value: '1' },
              ],
            },
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: getfeedbackList,
        title: '用户反馈列表',
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        canResize: false,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 220,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        canResize: true,
      });
      onMounted(() => {
        getScoreAug().then(res => {
          score.value = res
          loading.value = false
        })
      });
      async function handleDelete(record: Recordable) {
        await employNoteDelete({ id: record.id });
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      async function handlePublish(record: Recordable) {
        console.log('点击了发布', record);
        await NewPublicNews({ id: record.id, isPublic: 1 });
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      function handleEdit(record: Recordable) {
        openModal(true, record);
      }
      async function handleWithdraw(record: Recordable) {
        await NewPublicNews({ id: record.id, isPublic: 0 });
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      function hendleAddNew() {
        console.log('新增新闻');
      }
      async function editEnd({ record, index, key, value }) {
        console.log('editEnd', record, index, key, value);
        await addOrUpdate(record);
        createMessage.success(t('common.optSuccess'));
      }
      return {
        registerTable,
        handleDelete,
        handleEdit,
        handleWithdraw,
        handlePublish,
        hendleAddNew,
        reload,
        register,
        openModal,
        editEnd,
        getCheckPerm,
        score,
        activeKey,
        loading,
        router,
        downTemplate,
      };
    },
  });
</script>
<style lang="less" scoped>
  .score {
    .scoreTitle {
      margin: 10px 0;
    }
    .scoreList{
      // display: flex;
      width: 100%;
      overflow: auto;
      .scoreitem {
        // 保障flex下元素宽度不变
        flex-grow: 0;
        flex-shrink: 0;
        padding: 10px 20px 0 20px;
        margin-right: 20px;
        width: calc(100% / 6 - 20px);
        border: 1px solid #444
      }
    }
    ::v-deep .ant-collapse-item{
      background: #fff;
      border: none;
    }
  }
</style>