|
|
@@ -1,57 +1,179 @@
|
|
|
<!-- eslint-disable vue/multi-word-component-names -->
|
|
|
<template>
|
|
|
- <div class="device-manager-box">
|
|
|
- <NormalTable
|
|
|
- :columns="columns"
|
|
|
- :searchFormSchema="searchFormSchema"
|
|
|
- :formSchema="formSchema"
|
|
|
- :list="list"
|
|
|
- :deleteById="deleteById"
|
|
|
- :saveOrUpdate="saveOrUpdate"
|
|
|
- title="配置列表"
|
|
|
- :showTab="false"
|
|
|
- :deviceType="deviceType"
|
|
|
- >
|
|
|
- <template #filterCell="{ column, record }">
|
|
|
- <template v-if="column.key === 'moduleData.main'">
|
|
|
- <div v-for="(val, key) in record.moduleData.main" :key="key">
|
|
|
- <span>点位：{{ key }}；</span>
|
|
|
- <span>名称：{{ val }}；</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="column.key === 'moduleData.chart'">
|
|
|
- <div v-for="(val, key) in record.moduleData.chart" :key="key">
|
|
|
- <span>点位：{{ key }}；</span>
|
|
|
- <span>名称：{{ val }}；</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="column.key === 'showStyle.size'">
|
|
|
- {{ get(ModuleSizeMap, record.showStyle?.size) }}
|
|
|
- </template>
|
|
|
- <!-- <template v-if="column.key === 'showStyle.version'">
|
|
|
- {{ get(ModuleVersionMap, record.showStyle?.version) }}
|
|
|
- </template> -->
|
|
|
- <template v-if="column.key === 'showStyle.position'">
|
|
|
- {{ get(ModulePositionMap, record.showStyle?.position) }}
|
|
|
- </template>
|
|
|
- <!-- <template v-if="column.key === 'showStyle.charttype'">
|
|
|
- {{ get(ModuleChartTypeMap, record.showStyle?.charttype) }}
|
|
|
- </template> -->
|
|
|
- </template>
|
|
|
- </NormalTable>
|
|
|
- </div>
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #tableTitle>
|
|
|
+ <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
|
|
|
+ </template>
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="table-action-link" @click="handleConfig(record)">配置</a>
|
|
|
+ <a class="table-action-link" @click="handleEdit(record)">编辑</a>
|
|
|
+ <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
|
|
|
+ <a class="table-action-link">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ <!-- <template #bodyCell="{ column, record }">
|
|
|
+ <slot name="filterCell" v-bind="{ column, record }"></slot>
|
|
|
+ </template> -->
|
|
|
+ </BasicTable>
|
|
|
+ <DeviceModal @register="registerModal" @save-or-update="saveOrUpdateHandler" :showTab="false" :deviceType="deviceType" />
|
|
|
+ <BasicModal @register="registerConfigModal" @ok="handleUpdate" title="配置文件编辑" defaultFullscreen>
|
|
|
+ <CodeEditor v-model:value="configJSON" />
|
|
|
+ </BasicModal>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" name="system-user" setup>
|
|
|
- // 相关文档请参阅 vent/home/configurable/README.md
|
|
|
- import { ref } from 'vue';
|
|
|
- import NormalTable from '../comment/NormalTable.vue';
|
|
|
+<script lang="ts" setup>
|
|
|
+ //ts语法
|
|
|
+ import { ref, provide, reactive, toRaw } from 'vue';
|
|
|
+ import { BasicTable } 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 { useListPage } from '/@/hooks/system/useListPage';
|
|
|
import { list, deleteById, saveOrUpdate } from './configuration.api';
|
|
|
- import { ModulePositionMap, ModuleSizeMap } from './options';
|
|
|
import { searchFormSchema, columns, formSchema } from './configuration.data';
|
|
|
- import { get } from '../../home/billboard/utils';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import { BasicModal } from '/@/components/Modal';
|
|
|
+ import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue';
|
|
|
+ import { ModulePresetMap } from './options';
|
|
|
+ import { merge } from 'lodash-es';
|
|
|
|
|
|
+ const formData = reactive({});
|
|
|
+ const isUpdate = ref(false);
|
|
|
const deviceType = ref('');
|
|
|
+ const formSchemaData = ref(formSchema);
|
|
|
+ // const pageType = ref('');
|
|
|
+ const configJSON = ref('');
|
|
|
+
|
|
|
+ provide('formSchema', formSchemaData);
|
|
|
+ provide('isUpdate', isUpdate);
|
|
|
+ provide('formData', formData);
|
|
|
+ provide('deviceType', deviceType);
|
|
|
+
|
|
|
+ // const glob = useGlobSetting();
|
|
|
+ const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
+ const [registerConfigModal, configModalCtx] = useModal();
|
|
|
+
|
|
|
+ // 列表页面公共参数、方法
|
|
|
+ const { tableContext } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ title: '配置列表',
|
|
|
+ api: list,
|
|
|
+ columns,
|
|
|
+ showTableSetting: false,
|
|
|
+ // 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: searchFormSchema,
|
|
|
+ },
|
|
|
+ useSearchForm: true,
|
|
|
+ striped: true,
|
|
|
+ actionColumn: {
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ //注册table数据
|
|
|
+ const [registerTable, { reload }] = tableContext;
|
|
|
+
|
|
|
+ const saveOrUpdateHandler = async (params) => {
|
|
|
+ // 如果是新增或者选择了覆盖配置选项的则初始化配置
|
|
|
+ if (!isUpdate.value || params.allowCover) {
|
|
|
+ merge(params, ModulePresetMap[params.desc]);
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ await saveOrUpdate(params, isUpdate.value);
|
|
|
+ closeModal();
|
|
|
+ reload();
|
|
|
+ } catch (error) {
|
|
|
+ message.error('保存失败，请联系管理员');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 新增事件
|
|
|
+ */
|
|
|
+ function handleAdd() {
|
|
|
+ for (let key in formData) {
|
|
|
+ delete formData[key];
|
|
|
+ }
|
|
|
+ isUpdate.value = false;
|
|
|
+ openModal(true);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 编辑事件
|
|
|
+ */
|
|
|
+ function handleEdit(record) {
|
|
|
+ isUpdate.value = true;
|
|
|
+ Object.assign(formData, toRaw(record));
|
|
|
+ openModal(true, { formData }, false);
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 删除事件
|
|
|
+ */
|
|
|
+ async function handleDelete(record) {
|
|
|
+ await deleteById({ id: record.id }, reload);
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleConfig(record) {
|
|
|
+ Object.assign(formData, toRaw(record));
|
|
|
+ configJSON.value = record.moduleData || '';
|
|
|
+ configModalCtx.openModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 更新配置详情 */
|
|
|
+ async function handleUpdate() {
|
|
|
+ isUpdate.value = true;
|
|
|
+ saveOrUpdateHandler({
|
|
|
+ ...formData,
|
|
|
+ moduleData: JSON.parse(configJSON.value),
|
|
|
+ }).finally(() => {
|
|
|
+ configModalCtx.closeModal();
|
|
|
+ });
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<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>
|
