Merge branch 'f-dev' into 'main'

feat:新增意见反馈功能

See merge request huang/yun-teng-iot-front!203

+import { defHttp } from '/@/utils/http/axios';
+import { CameraModel, CameraQueryParam } from './model/feedbackModel';
+
+enum CameraManagerApi {
+  CAMERA_POST_URL = '/opinion',
+  CAMERA_GET_URL = '/opinion',
+  CAMERA_DELETE_URL = '/opinion',
+  CAMERA_GET_DETAIL_URL = '/opinion',
+}
+
+export const feedbackPage = (params: CameraQueryParam) => {
+  return defHttp.get<CameraQueryParam>({
+    url: CameraManagerApi.CAMERA_GET_URL,
+    params,
+  });
+};
+
+/**
+ * 删除视频
+ * @param ids 删除的ids
+ */
+export const deleteFeedbackManage = (ids: string[]) => {
+  return defHttp.delete({
+    url: CameraManagerApi.CAMERA_DELETE_URL,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+// 创建或编辑视频
+export const createOrEditFeedBackManage = (data) => {
+  return defHttp.post<CameraModel>({
+    url: CameraManagerApi.CAMERA_POST_URL,
+    data,
+  });
+};
+
+// 查询视频详情
+export const getCameraManageDetail = (id: string) => {
+  return defHttp.get({
+    url: CameraManagerApi.CAMERA_GET_DETAIL_URL + `/${id}`,
+  });
+};

+import { BasicPageParams } from '/@/api/model/baseModel';
+export type CameraQueryParam = BasicPageParams & CameraParam;
+
+export type CameraParam = {
+  status?: true;
+  name?: string;
+  organizationId?: string;
+  orderFiled?: string;
+  orderType?: string;
+};
+
+export interface CameraModel {
+  category?: string;
+  contact?: string;
+  createTime?: string;
+  creator?: string;
+  defaultConfig?: string;
+  description?: string;
+  enabled?: true;
+  icon?: string;
+  id?: string;
+  images?: string;
+  message?: string;
+  name?: string;
+  remark?: string;
+  roleIds?: [string];
+  status?: string;
+  tenantExpireTime?: string;
+  tenantId?: string;
+  tenantProfileId?: string;
+  tenantStatus?: string;
+  title?: string;
+  updateTime?: string;
+  updater?: string;
+}

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="意见反馈预览" width="30%">
+    <BasicForm @register="registerForm">
+      <template #iconSelect>
+        <div style="width: 22vw; display: flex; flex-wrap: wrap">
+          <template v-for="(item, index) in feedBackImgUrl" :key="index">
+            <span style="display: none">{{ index }}</span>
+            <div>
+              <Upload list-type="picture-card" :openFileDialogOnClick="false">
+                <img @click="handlePreview(item)" :src="item" alt="avatar" />
+              </Upload>
+            </div>
+          </template>
+          <Modal
+            :visible="previewVisible"
+            :title="previewTitle"
+            :footer="null"
+            @cancel="handleCancel"
+          >
+            <img alt="example" style="width: 100%" :src="previewImage" />
+          </Modal>
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { Upload } from 'ant-design-vue';
+  import { Modal } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'ContactDrawer',
+    components: { BasicDrawer, BasicForm, Upload, Modal },
+    emits: ['success', 'register'],
+    setup(_) {
+      const feedBackImgUrl = ref([]);
+      const previewVisible = ref(false);
+      const previewImage = ref('');
+      const previewTitle = ref('');
+      const [registerForm, { setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+        await resetFields();
+        feedBackImgUrl.value = [];
+        setDrawerProps({ confirmLoading: false });
+        await setFieldsValue(data.record);
+        try {
+          const contactFormJson = JSON.parse(data.record.contact);
+          const imageFormJson = JSON.parse(data.record.images);
+          feedBackImgUrl.value = imageFormJson;
+          await setFieldsValue({
+            qq: contactFormJson.qq,
+            email: contactFormJson.email,
+            phone: contactFormJson.phone,
+          });
+        } catch (e) {
+          console.log('意见反馈', e);
+        }
+      });
+      const handlePreview = async (item) => {
+        previewVisible.value = true;
+        previewImage.value = item;
+        previewTitle.value = '预览图片';
+      };
+      const handleCancel = () => {
+        previewVisible.value = false;
+      };
+      return {
+        registerDrawer,
+        registerForm,
+        feedBackImgUrl,
+        handlePreview,
+        previewVisible,
+        handleCancel,
+        previewImage,
+        previewTitle,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '主题',
+    dataIndex: 'title',
+    width: 80,
+  },
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '反馈信息',
+    dataIndex: 'message',
+    width: 120,
+  },
+  {
+    title: '反馈方式',
+    dataIndex: 'config',
+    width: 180,
+    slots: { customRender: 'config' },
+  },
+  {
+    title: '添加时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '姓名',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入姓名',
+    },
+  },
+];
+
+// 弹框配置项
+export const formSchema: FormSchema[] = [
+  {
+    field: 'title',
+    label: '主题',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'name',
+    label: '姓名',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'phone',
+    label: '手机',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'qq',
+    label: 'QQ',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'message',
+    label: '反馈信息',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'images',
+    label: '预览图片',
+    slot: 'iconSelect',
+    component: 'Input',
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button
+          type="primary"
+          color="error"
+          @click="handleDeleteOrBatchDelete(null)"
+          :disabled="hasBatchDelete"
+        >
+          批量删除
+        </a-button>
+      </template>
+      <template #config="{ record }">
+        <a-button type="link" class="ml-2" @click="showData(record)"> 查看反馈方式 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '预览',
+              icon: 'clarity:note-edit-line',
+              onClick: handleViewVideo.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <FeedbackDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, computed, h } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDrawer } from '/@/components/Drawer';
+  import FeedbackDrawer from './FeedbackDrawer.vue';
+  import { feedbackPage, deleteFeedbackManage } from '/@/api/feedback/feedbackManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { useModal } from '/@/components/Modal';
+  import { Modal } from 'ant-design-vue';
+  import { JsonPreview } from '/@/components/CodeEditor';
+
+  export default defineComponent({
+    components: {
+      BasicTable,
+      TableAction,
+      FeedbackDrawer,
+    },
+    setup() {
+      let selectedRowIds = ref<string[]>([]);
+      const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
+      // 复选框事件
+      const onSelectRowChange = (selectedRowKeys: string[]) => {
+        selectedRowIds.value = selectedRowKeys;
+      };
+      const searchInfo = reactive<Recordable>({});
+      const [registerModal] = useModal();
+      // 表格hooks
+      const [registerTable, { reload }] = useTable({
+        title: '意见反馈列表',
+        api: feedbackPage,
+        columns,
+        showIndexColumn: false,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowSelection: {
+          onChange: onSelectRowChange,
+          type: 'checkbox',
+        },
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+      // 删除或批量删除
+      const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
+        if (record) {
+          try {
+            await deleteFeedbackManage([record.id]);
+            createMessage.success('删除成功');
+            handleSuccess();
+          } catch (e) {}
+        } else {
+          try {
+            await deleteFeedbackManage(selectedRowIds.value);
+            createMessage.success('批量删除成功');
+            selectedRowIds.value = [];
+            handleSuccess();
+          } catch (e) {}
+        }
+      };
+
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+      const handleViewVideo = (record) => {
+        openDrawer(true, {
+          isUpdate: true,
+          record,
+        });
+      };
+      function showData(record: Recordable) {
+        try {
+          const jsonContact = JSON.parse(record.contact);
+          Modal.info({
+            title: '当前反馈方式',
+            width: 600,
+            centered: true,
+            maskClosable: true,
+            content: h(JsonPreview, { data: jsonContact }),
+          });
+        } catch (e) {
+          console.log('意见反馈', e);
+        }
+      }
+      return {
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        registerTable,
+        registerDrawer,
+        handleViewVideo,
+        registerModal,
+        showData,
+      };
+    },
+  });
+</script>