Commit 2ae23072e3fa39c6765383c4b53d9ba67187b51a
1 parent
cc519f89
feat: add filter model of matter list
Showing
5 changed files
with
101 additions
and
20 deletions
| 1 | import { BasicPageParams } from '../model/baseModel'; | 1 | import { BasicPageParams } from '../model/baseModel'; |
| 2 | import { GetModelTslParams, ModelOfMatterParams } from './model/modelOfMatterModel'; | 2 | import { GetModelTslParams, ModelOfMatterParams } from './model/modelOfMatterModel'; |
| 3 | import { defHttp } from '/@/utils/http/axios'; | 3 | import { defHttp } from '/@/utils/http/axios'; |
| 4 | +import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config'; | ||
| 4 | 5 | ||
| 5 | enum ModelOfMatter { | 6 | enum ModelOfMatter { |
| 6 | CREATE = '/things_model', | 7 | CREATE = '/things_model', |
| @@ -8,9 +9,16 @@ enum ModelOfMatter { | @@ -8,9 +9,16 @@ enum ModelOfMatter { | ||
| 8 | DELETE = '/things_model', | 9 | DELETE = '/things_model', |
| 9 | TSL = '/things_model', | 10 | TSL = '/things_model', |
| 10 | LIST = '/things_model/page', | 11 | LIST = '/things_model/page', |
| 12 | + RELEASE = '/things_model', | ||
| 11 | } | 13 | } |
| 12 | 14 | ||
| 13 | -export const getModelList = (params: BasicPageParams) => { | 15 | +export const getModelList = ( |
| 16 | + params: BasicPageParams & { | ||
| 17 | + deviceProfileId: string; | ||
| 18 | + functionTyp?: FunctionType; | ||
| 19 | + nameOrIdentifier?: string; | ||
| 20 | + } | ||
| 21 | +) => { | ||
| 14 | return defHttp.get({ | 22 | return defHttp.get({ |
| 15 | url: `${ModelOfMatter.LIST}`, | 23 | url: `${ModelOfMatter.LIST}`, |
| 16 | params, | 24 | params, |
| @@ -46,3 +54,9 @@ export const deleteModel = (params: string[]) => { | @@ -46,3 +54,9 @@ export const deleteModel = (params: string[]) => { | ||
| 46 | }, | 54 | }, |
| 47 | }); | 55 | }); |
| 48 | }; | 56 | }; |
| 57 | + | ||
| 58 | +export const releaseModel = (deviceProfileId: string) => { | ||
| 59 | + return defHttp.put({ | ||
| 60 | + url: `${ModelOfMatter.RELEASE}/${deviceProfileId}`, | ||
| 61 | + }); | ||
| 62 | +}; |
| @@ -50,6 +50,7 @@ | @@ -50,6 +50,7 @@ | ||
| 50 | 50 | ||
| 51 | const [register, {}] = useDrawerInner(async (data: { record: DeviceRecord }) => { | 51 | const [register, {}] = useDrawerInner(async (data: { record: DeviceRecord }) => { |
| 52 | activeKey.value = 'product'; | 52 | activeKey.value = 'product'; |
| 53 | + record.value = data.record; | ||
| 53 | record.value = await deviceConfigGetDetail(data.record.id); | 54 | record.value = await deviceConfigGetDetail(data.record.id); |
| 54 | setDeviceConfFormData(unref(record)); | 55 | setDeviceConfFormData(unref(record)); |
| 55 | }); | 56 | }); |
| @@ -6,6 +6,8 @@ import { numberRule } from '/@/utils/rules'; | @@ -6,6 +6,8 @@ import { numberRule } from '/@/utils/rules'; | ||
| 6 | 6 | ||
| 7 | import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi'; | 7 | import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi'; |
| 8 | import { FormField, FunctionType } from './step/cpns/physical/cpns/config'; | 8 | import { FormField, FunctionType } from './step/cpns/physical/cpns/config'; |
| 9 | +import { h } from 'vue'; | ||
| 10 | +import { Tag } from 'ant-design-vue'; | ||
| 9 | 11 | ||
| 10 | export const steps = [ | 12 | export const steps = [ |
| 11 | { | 13 | { |
| @@ -52,12 +54,49 @@ export const physicalColumn: BasicColumn[] = [ | @@ -52,12 +54,49 @@ export const physicalColumn: BasicColumn[] = [ | ||
| 52 | }, | 54 | }, |
| 53 | }, | 55 | }, |
| 54 | { | 56 | { |
| 57 | + title: '状态', | ||
| 58 | + dataIndex: 'status', | ||
| 59 | + width: 100, | ||
| 60 | + customRender: (value: Record<'text', number>) => { | ||
| 61 | + const { text } = value; | ||
| 62 | + return h( | ||
| 63 | + Tag, | ||
| 64 | + { | ||
| 65 | + color: text ? 'green' : 'red', | ||
| 66 | + }, | ||
| 67 | + () => (text ? '已发布' : '待发布') | ||
| 68 | + ); | ||
| 69 | + }, | ||
| 70 | + }, | ||
| 71 | + { | ||
| 55 | title: '创建时间', | 72 | title: '创建时间', |
| 56 | dataIndex: 'createTime', | 73 | dataIndex: 'createTime', |
| 57 | width: 150, | 74 | width: 150, |
| 58 | }, | 75 | }, |
| 59 | ]; | 76 | ]; |
| 60 | 77 | ||
| 78 | +export const modelOfMatterForm: FormSchema[] = [ | ||
| 79 | + { | ||
| 80 | + field: 'functionType', | ||
| 81 | + label: '功能类型', | ||
| 82 | + component: 'Select', | ||
| 83 | + colProps: { span: 8 }, | ||
| 84 | + componentProps: { | ||
| 85 | + options: [ | ||
| 86 | + { label: '属性', value: FunctionType.PROPERTIES }, | ||
| 87 | + { label: '事件', value: FunctionType.EVENTS }, | ||
| 88 | + { label: '服务', value: FunctionType.SERVICE }, | ||
| 89 | + ], | ||
| 90 | + }, | ||
| 91 | + }, | ||
| 92 | + { | ||
| 93 | + field: 'nameOrIdentifier', | ||
| 94 | + label: '功能名称/标识符', | ||
| 95 | + component: 'Input', | ||
| 96 | + colProps: { span: 8 }, | ||
| 97 | + }, | ||
| 98 | +]; | ||
| 99 | + | ||
| 61 | export const step1Schemas: FormSchema[] = [ | 100 | export const step1Schemas: FormSchema[] = [ |
| 62 | { | 101 | { |
| 63 | field: 'image', | 102 | field: 'image', |
| @@ -2,6 +2,7 @@ | @@ -2,6 +2,7 @@ | ||
| 2 | <div class="p-style"> | 2 | <div class="p-style"> |
| 3 | <BasicTable | 3 | <BasicTable |
| 4 | :rowSelection="{ type: 'checkbox' }" | 4 | :rowSelection="{ type: 'checkbox' }" |
| 5 | + class="bg-gray-100" | ||
| 5 | :clickToRowSelect="false" | 6 | :clickToRowSelect="false" |
| 6 | @register="registerTable" | 7 | @register="registerTable" |
| 7 | > | 8 | > |
| @@ -41,7 +42,9 @@ | @@ -41,7 +42,9 @@ | ||
| 41 | cancel-text="取消" | 42 | cancel-text="取消" |
| 42 | @confirm="handleEmit" | 43 | @confirm="handleEmit" |
| 43 | > | 44 | > |
| 44 | - <Button v-if="isShowBtn" type="primary"> 发布上线 </Button> | 45 | + <Button v-if="isShowBtn" type="primary" :loading="releaseLoading"> |
| 46 | + 发布上线 | ||
| 47 | + </Button> | ||
| 45 | </Popconfirm> | 48 | </Popconfirm> |
| 46 | <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn"> | 49 | <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn"> |
| 47 | 返回 | 50 | 返回 |
| @@ -108,7 +111,7 @@ | @@ -108,7 +111,7 @@ | ||
| 108 | <script lang="ts" setup> | 111 | <script lang="ts" setup> |
| 109 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 112 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 110 | import { useModal } from '/@/components/Modal'; | 113 | import { useModal } from '/@/components/Modal'; |
| 111 | - import { physicalColumn } from '../device.profile.data'; | 114 | + import { modelOfMatterForm, physicalColumn } from '../device.profile.data'; |
| 112 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | 115 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
| 113 | import { Authority } from '/@/components/Authority'; | 116 | import { Authority } from '/@/components/Authority'; |
| 114 | import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue'; | 117 | import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue'; |
| @@ -116,13 +119,13 @@ | @@ -116,13 +119,13 @@ | ||
| 116 | import { Popconfirm, Button, Alert } from 'ant-design-vue'; | 119 | import { Popconfirm, Button, Alert } from 'ant-design-vue'; |
| 117 | import { useMessage } from '/@/hooks/web/useMessage'; | 120 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 118 | import { DeviceRecord } from '/@/api/device/model/deviceModel'; | 121 | import { DeviceRecord } from '/@/api/device/model/deviceModel'; |
| 119 | - import { deleteModel, getModelList } from '/@/api/device/modelOfMatter'; | 122 | + import { deleteModel, getModelList, releaseModel } from '/@/api/device/modelOfMatter'; |
| 120 | import { OpenModelOfMatterModelParams, OpenModelMode } from './cpns/physical/types'; | 123 | import { OpenModelOfMatterModelParams, OpenModelMode } from './cpns/physical/types'; |
| 121 | import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; | 124 | import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel'; |
| 122 | import { ref } from 'vue'; | 125 | import { ref } from 'vue'; |
| 123 | defineEmits(['register']); | 126 | defineEmits(['register']); |
| 124 | 127 | ||
| 125 | - defineProps<{ | 128 | + const props = defineProps<{ |
| 126 | record: DeviceRecord; | 129 | record: DeviceRecord; |
| 127 | }>(); | 130 | }>(); |
| 128 | 131 | ||
| @@ -132,13 +135,19 @@ | @@ -132,13 +135,19 @@ | ||
| 132 | const [registerModalTsl, { openModal: openModalTsl }] = useModal(); | 135 | const [registerModalTsl, { openModal: openModalTsl }] = useModal(); |
| 133 | 136 | ||
| 134 | const [registerTable, { reload, setProps }] = useTable({ | 137 | const [registerTable, { reload, setProps }] = useTable({ |
| 135 | - api: getModelList, | 138 | + api: async (params: Record<'page' | 'pageSize', number>) => { |
| 139 | + return await getModelList({ ...params, deviceProfileId: props.record.id }); | ||
| 140 | + }, | ||
| 136 | columns: physicalColumn, | 141 | columns: physicalColumn, |
| 137 | showIndexColumn: false, | 142 | showIndexColumn: false, |
| 138 | clickToRowSelect: false, | 143 | clickToRowSelect: false, |
| 139 | - useSearchForm: false, | ||
| 140 | showTableSetting: true, | 144 | showTableSetting: true, |
| 141 | bordered: true, | 145 | bordered: true, |
| 146 | + useSearchForm: true, | ||
| 147 | + formConfig: { | ||
| 148 | + schemas: modelOfMatterForm, | ||
| 149 | + labelWidth: 120, | ||
| 150 | + }, | ||
| 142 | actionColumn: { | 151 | actionColumn: { |
| 143 | width: 200, | 152 | width: 200, |
| 144 | title: '操作', | 153 | title: '操作', |
| @@ -200,9 +209,19 @@ | @@ -200,9 +209,19 @@ | ||
| 200 | const handleEditPhysicalModel = () => (isShowBtn.value = true); | 209 | const handleEditPhysicalModel = () => (isShowBtn.value = true); |
| 201 | 210 | ||
| 202 | const handleReturn = () => (isShowBtn.value = false); | 211 | const handleReturn = () => (isShowBtn.value = false); |
| 203 | - const handleEmit = () => { | ||
| 204 | - isShowBtn.value = false; | ||
| 205 | - createMessage.success('发布成功'); | 212 | + |
| 213 | + const releaseLoading = ref(false); | ||
| 214 | + const handleEmit = async () => { | ||
| 215 | + try { | ||
| 216 | + releaseLoading.value = true; | ||
| 217 | + await releaseModel(props.record.id); | ||
| 218 | + handleReturn(); | ||
| 219 | + createMessage.success('发布成功'); | ||
| 220 | + reload(); | ||
| 221 | + } catch (error) { | ||
| 222 | + } finally { | ||
| 223 | + releaseLoading.value = false; | ||
| 224 | + } | ||
| 206 | }; | 225 | }; |
| 207 | 226 | ||
| 208 | defineExpose({}); | 227 | defineExpose({}); |
| @@ -30,7 +30,7 @@ | @@ -30,7 +30,7 @@ | ||
| 30 | </div> | 30 | </div> |
| 31 | <div> | 31 | <div> |
| 32 | <Spin :spinning="loading"> | 32 | <Spin :spinning="loading"> |
| 33 | - <div id="jsoneditor" ref="jsoneditorRef"></div> | 33 | + <div id="jsoneditor" ref="jsoneditorEl"></div> |
| 34 | </Spin> | 34 | </Spin> |
| 35 | </div> | 35 | </div> |
| 36 | </div> | 36 | </div> |
| @@ -60,9 +60,12 @@ | @@ -60,9 +60,12 @@ | ||
| 60 | 60 | ||
| 61 | const jsonValue = ref(); | 61 | const jsonValue = ref(); |
| 62 | 62 | ||
| 63 | - const jsonInstance = ref(); | 63 | + const jsonInstance = ref<{ |
| 64 | + set: (value?: Recordable) => void; | ||
| 65 | + get: () => Recordable; | ||
| 66 | + }>(); | ||
| 64 | 67 | ||
| 65 | - const jsoneditorRef = ref<Recordable>(); | 68 | + const jsoneditorEl = ref<HTMLDivElement>(); |
| 66 | 69 | ||
| 67 | const activeKey = ref(FunctionType.PROPERTIES); | 70 | const activeKey = ref(FunctionType.PROPERTIES); |
| 68 | 71 | ||
| @@ -73,7 +76,7 @@ | @@ -73,7 +76,7 @@ | ||
| 73 | mainMenuBar: false, | 76 | mainMenuBar: false, |
| 74 | statusBar: false, | 77 | statusBar: false, |
| 75 | }; | 78 | }; |
| 76 | - let editor = new jsoneditor(jsoneditorRef.value, options); | 79 | + let editor = new jsoneditor(jsoneditorEl.value, options); |
| 77 | editor.set(jsonValue.value); | 80 | editor.set(jsonValue.value); |
| 78 | jsonInstance.value = editor; | 81 | jsonInstance.value = editor; |
| 79 | }); | 82 | }); |
| @@ -83,7 +86,7 @@ | @@ -83,7 +86,7 @@ | ||
| 83 | 86 | ||
| 84 | const handleCopy = () => { | 87 | const handleCopy = () => { |
| 85 | try { | 88 | try { |
| 86 | - const valueRef = unref(jsonInstance).get(); | 89 | + const valueRef = unref(jsonInstance)?.get(); |
| 87 | const value = JSON.stringify(unref(valueRef)); | 90 | const value = JSON.stringify(unref(valueRef)); |
| 88 | if (!value) { | 91 | if (!value) { |
| 89 | createMessage.warning('请输入要拷贝的内容!'); | 92 | createMessage.warning('请输入要拷贝的内容!'); |
| @@ -99,31 +102,36 @@ | @@ -99,31 +102,36 @@ | ||
| 99 | }; | 102 | }; |
| 100 | 103 | ||
| 101 | const getFormData = () => { | 104 | const getFormData = () => { |
| 102 | - const value = unref(jsonInstance).get(); | 105 | + const value = unref(jsonInstance)?.get(); |
| 103 | if (!value) return; | 106 | if (!value) return; |
| 104 | return value; | 107 | return value; |
| 105 | }; | 108 | }; |
| 106 | 109 | ||
| 107 | const resetFormData = () => { | 110 | const resetFormData = () => { |
| 108 | - unref(jsonInstance).set(); | 111 | + unref(jsonInstance)?.set(); |
| 109 | }; | 112 | }; |
| 110 | 113 | ||
| 111 | const handlePremitter = () => { | 114 | const handlePremitter = () => { |
| 112 | - const value = unref(jsonInstance).get(); | ||
| 113 | - return unref(jsonInstance).set(value); | 115 | + const value = unref(jsonInstance)?.get(); |
| 116 | + return unref(jsonInstance)?.set(value); | ||
| 114 | }; | 117 | }; |
| 115 | 118 | ||
| 116 | const handleSwitchTsl = async (functionType: FunctionType) => { | 119 | const handleSwitchTsl = async (functionType: FunctionType) => { |
| 117 | try { | 120 | try { |
| 118 | loading.value = true; | 121 | loading.value = true; |
| 119 | const record = await getModelTsl({ deviceProfileId: props.record.id, functionType }); | 122 | const record = await getModelTsl({ deviceProfileId: props.record.id, functionType }); |
| 120 | - console.log(record); | 123 | + jsonInstance.value?.set(record); |
| 121 | } catch (error) { | 124 | } catch (error) { |
| 122 | } finally { | 125 | } finally { |
| 123 | loading.value = false; | 126 | loading.value = false; |
| 124 | } | 127 | } |
| 125 | }; | 128 | }; |
| 126 | 129 | ||
| 130 | + onMounted(() => { | ||
| 131 | + activeKey.value = FunctionType.PROPERTIES; | ||
| 132 | + handleSwitchTsl(FunctionType.PROPERTIES); | ||
| 133 | + }); | ||
| 134 | + | ||
| 127 | defineExpose({ | 135 | defineExpose({ |
| 128 | getFormData, | 136 | getFormData, |
| 129 | resetFormData, | 137 | resetFormData, |