feat: 国标ID修改

src/api/media/cascade.ts

@@ -33,7 +33,7 @@ export default {
     // 验证国标ID是否存在
     validateField: (id: string, data: string[]): any => server.post(`/media/gb28181-cascade/${id}/gbChannelId/_validate`, data),
     // 更改国标ID
-    updateGbChannelId: (id: string, data: any): any => server.post(`/media/gb28181-cascade/binding/${id}`, data),
+    updateGbChannelId: (id: string, data: any): any => server.put(`/media/gb28181-cascade/binding/${id}`, data),
     // 查询通道分页列表
     queryChannelList: (data: any): any => server.post(`media/channel/_query`, data),
 

src/views/media/Cascade/Channel/index.vue

@@ -40,6 +40,53 @@
                     </a-popconfirm>
                 </a-space>
             </template>
+            <template #gbChannelId="slotProps">
+                <a-space>
+                    <Ellipsis>
+                        {{ slotProps.gbChannelId }}
+                    </Ellipsis>
+                    <a-popover
+                        v-model:visible="slotProps.popVis"
+                        trigger="click"
+                    >
+                        <template #title>
+                            <div class="header">
+                                <span>编辑国标ID</span>
+                                <AIcon
+                                    type="CloseOutlined"
+                                    @click="handleClose(slotProps)"
+                                />
+                            </div>
+                        </template>
+                        <template #content>
+                            <div class="simple-form">
+                                <a-input
+                                    v-model:value="gbID"
+                                    @change="validField(slotProps)"
+                                />
+                                <div
+                                    class="error"
+                                    v-if="valid && !valid?.passed"
+                                >
+                                    <!-- {{ valid?.reason }} -->
+                                    该国标ID在同一设备下已存在
+                                </div>
+                            </div>
+                            <a-button
+                                type="primary"
+                                @click="handleSave(slotProps)"
+                                :loading="loading"
+                                style="width: 100%"
+                            >
+                                保存
+                            </a-button>
+                        </template>
+                        <a-button type="link" @click="slotProps.popVis = true">
+                            <AIcon type="EditOutlined" />
+                        </a-button>
+                    </a-popover>
+                </a-space>
+            </template>
             <template #status="slotProps">
                 <a-space>
                     <a-badge
@@ -106,6 +153,8 @@ const columns = [
         title: '设备名称',
         dataIndex: 'deviceName',
         key: 'deviceName',
+        // width: 200,
+        // fixed: 'left',
         search: {
             type: 'string',
         },
@@ -174,7 +223,6 @@ const params = ref<Record<string, any>>({});
  */
 const handleSearch = (e: any) => {
     params.value = e;
-    console.log('params.value: ', params.value);
 };
 
 const listRef = ref();
@@ -264,4 +312,61 @@ const handleMultipleUnbind = async () => {
         message.error('操作失败！');
     }
 };
+
+/**
+ * 编辑国标ID
+ */
+const gbID = ref('');
+const loading = ref(false);
+const handleSave = async (data: any) => {
+    if (!gbID.value) message.error('请输入国标ID');
+    if (!valid.value?.passed) return;
+
+    loading.value = true;
+    const resp = await CascadeApi.updateGbChannelId(data.id, {
+        gbChannelId: gbID.value,
+    });
+    loading.value = false;
+    if (resp.success) {
+        message.success('操作成功！');
+        listRef.value?.reload();
+        valid.value = undefined;
+        gbID.value = '';
+    } else {
+        message.error('操作失败！');
+    }
+};
+
+/**
+ * 验证ID是否存在
+ */
+const valid = ref<{ passed: string; reason: string }>();
+const validField = async (data: any) => {
+    const { result } = await CascadeApi.validateField(data.cascadeId, [
+        gbID.value,
+    ]);
+    valid.value = result;
+};
+
+/**
+ * 取消
+ */
+const handleClose = (data: any) => {
+    data.popVis = false;
+    valid.value = undefined;
+    gbID.value = '';
+};
 </script>
+<style lang="less" scoped>
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.simple-form {
+    margin-bottom: 10px;
+    .error {
+        color: red;
+    }
+}
+</style>