1

src/views/vent/deviceManager/workingFace/CustomNormalTable.vue

@@ -0,0 +1,299 @@
+<template>
+  <div >
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button><span style="color: #f00;">（注：新增时请先选择系统类型 <b style="color: rgb(255, 191, 0); font-size: 20px;">↑</b>）</span>
+        <a-dropdown v-if="selectedRowKeys.length > 0" :getPopupContainer="getPopupContainer">
+          <template #overlay>
+            <a-menu>
+              <a-menu-item key="1" @click="batchHandleDelete">
+                <Icon icon="ant-design:delete-outlined" />
+                删除
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a-button
+            >批量操作
+            <Icon style="fontsize: 12px" icon="ant-design:down-outlined" />
+          </a-button>
+        </a-dropdown>
+      </template>
+      <template #action="{ record }">
+        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
+        <a-popconfirm
+          title="确定删除?"
+          @confirm="handleDelete(record)"
+        >
+          <a class="table-action-link">删除</a>
+        </a-popconfirm>
+        <slot name="action" v-bind="{ record }"></slot>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <slot name="filterCell" v-bind="{ column, record }"></slot>
+      </template>
+    </BasicTable>
+    <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :showTab="showTab" :deviceType="deviceType" />
+    <!-- <DeviceModal v-model:visible="modalVisible" @saveOrUpdate="saveOrUpdateHandler" @close-modal="closeModal" :showTab="showTab"  /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+//ts语法
+import { ref, provide, reactive, toRaw, defineExpose, watch } from 'vue';
+import { BasicTable, ActionItem, EditRecordRow, BasicColumn } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import DeviceModal from '../comment/DeviceModal.vue';
+// import { getToken } from '/@/utils/auth';
+// import { useGlobSetting } from '/@/hooks/setting';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getPopupContainer } from '/@/utils';
+import { message } from 'ant-design-vue';
+
+const props = defineProps({
+  columnsType: {
+    type: String,
+    // required: true,
+  },
+  columns: {
+    type: Array,
+    // required: true,
+    default: () => [],
+  },
+  searchFormSchema: {
+    type: Array,
+    default: () => [],
+  },
+  formSchema: {
+    type: Array,
+    required: true,
+  },
+  list: {
+    type: Function,
+    required: true,
+  },
+  getImportUrl: {
+    type: String,
+  },
+  getExportUrl: {
+    type: String,
+  },
+  deleteById: {
+    type: Function,
+    required: true,
+  },
+  batchDelete: {
+    type: Function,
+  },
+  saveOrUpdate: {
+    type: Function,
+    required: true,
+  },
+  pointList: {
+    type: Function,
+  },
+  showTab: {
+    type: Boolean,
+    default: false,
+  },
+  designScope: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  deviceType: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(['submitSuccess', 'editHandler']);
+
+const isUpdate = ref(false);
+const record = reactive({});
+const formSchemaData = ref(props.formSchema)
+const deviceTypeId = ref('')
+const pageType = ref('')
+
+watch(() => props.formSchema, (val) => {
+  formSchemaData.value = val
+})
+
+provide('formSchema', formSchemaData);
+provide('isUpdate', isUpdate);
+provide('formData', record);
+provide('deviceType', props.deviceType);
+// const glob = useGlobSetting();
+const [registerModal, { openModal, closeModal }] = useModal();
+
+const columnList = getTableHeaderColumns(props.columnsType);
+
+// 列表页面公共参数、方法
+const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
+  designScope: props.designScope,
+  tableProps: {
+    showTableSetting: false,
+    title: props.title,
+    api: props.list,
+    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
+    // size: 'small',
+    // bordered: false,
+    formConfig: {
+      showAdvancedButton: true,
+      // labelWidth: 100,
+      labelAlign: 'left',
+      labelCol: {
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 9,
+        xl: 7,
+        xxl: 5,
+      },
+      schemas: props.searchFormSchema as any[],
+    },
+    useSearchForm: props.searchFormSchema.length > 0 ? true : false,
+    striped: true,
+    actionColumn: {
+      width: 180,
+    },
+    beforeFetch: (params) => {
+      return Object.assign(params, { column: 'createTime', devicekind: props.deviceType });
+    },
+  },
+});
+
+
+//注册table数据
+const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
+
+const saveOrUpdateHandler = async (params) => {
+  try {
+    await props.saveOrUpdate(params, isUpdate.value);
+    !props.showTab ? closeModal() : '';
+    await doRequest(props.list, { confirm: false });
+    emit('submitSuccess', params)
+  } catch (error) {
+    message.error('保存失败，请联系管理员');
+  }
+};
+
+// const closeModalFn = () => {
+//   closeModal()
+// }
+/**
+ * 新增事件
+ */
+function handleAdd() {
+  const searchFormData = getForm().getFieldsValue()
+  if(searchFormData && searchFormData['strtype']){
+    emit('editHandler', searchFormData)
+    for (let key in record) {
+      if(key == 'strtype'){
+        record[key] = searchFormData['strtype']
+      }else{
+        delete record[key];
+      }
+    }
+    isUpdate.value = false;
+    openModal(true, {
+      record: { strtype : searchFormData['strtype'] }
+    }, false);
+  }else{
+    message.info('请先选择系统类型！！')
+  }
+}
+
+/**
+ * 编辑事件
+ */
+function handleEdit(data) {
+  emit('editHandler', data)
+  isUpdate.value = true;
+  Object.assign(record, toRaw(data));
+  openModal(true, {
+    record,
+  }, false);
+}
+
+/**
+ * 删除事件
+ */
+async function handleDelete(record) {
+  await props.deleteById({ id: record.id }, reload);
+}
+
+/**
+ * 批量删除事件
+ */
+async function batchHandleDelete() {
+  doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
+}
+/**
+ * 查看
+ */
+// function handleDetail(record) {
+//   iframeUrl.value = `${glob.uploadUrl}/sys/annountCement/show/${record.id}?token=${getToken()}`;
+//   openDetail(true);
+// }
+/**
+ * 操作列定义
+ * @param record
+ */
+function getActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
+  return [
+    {
+      label: '编辑',
+      onClick: handleEdit.bind(null, record, column),
+    },
+    {
+      label: '删除',
+      popConfirm: {
+        title: '是否确认删除',
+        confirm: handleDelete.bind(null, record, column),
+      },
+    },
+    // {
+    //   label: '查看',
+    //   onClick: handleDetail.bind(null, record),
+    // },
+  ];
+}
+
+
+defineExpose({
+  doRequest, onExportXls, onImportXls, reload, getForm
+});
+
+</script>
+
+<style scoped lang="less">
+  @ventSpace: zxm;
+  @vent-table-no-hover: #00bfff10;
+
+  :deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+  }
+  :deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+  }
+
+  :deep(.@{ventSpace}-table-tbody > tr > td) {
+    background-color: #0dc3ff05;
+  }
+  :deep(.jeecg-basic-table-row__striped) {
+    td {
+      background-color: @vent-table-no-hover !important;
+    }
+  }
+  :deep(.@{ventSpace}-select-dropdown) {
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
+      background-color: #ffffff33 !important;
+    }
+
+    .@{ventSpace}-select-item:hover {
+      background-color: #ffffff33 !important;
+    }
+  }
+</style>

src/views/vent/deviceManager/workingFace/index.vue

@@ -21,7 +21,7 @@
 <script lang="ts" name="system-user" setup>
   //ts语法
   import { ref, onMounted } from 'vue'
-  // import CustomNormalTable from './CustomNormalTable.vue';
+  import CustomNormalTable from './CustomNormalTable.vue';
   import { searchFormSchema, commentFormSchema } from './workingFace.data';
   import { list, deleteById, batchDeleteById, saveOrUpdate } from './workingFace.api';