Просмотр исходного кода

Merge branch 'NVR-manage' into 'dev'

style: 【446.NVR管理】修改场景选择组件为el-tree-select及部分样式

See merge request skyeye/skyeye_frontend/skyeye-admin!78
zhu die 1 год назад
Родитель
Сommit
81c5c3d1bb

+ 14 - 7
src/views/cameras/nvrlist/components/CreateDrawer.vue

@@ -26,8 +26,10 @@
           <el-input v-model="formParams.password" placeholder="请输入设备密码" type="password" show-password />
         </el-form-item>
         <el-form-item label="使用场景:" prop="workshopList">
-          <el-cascader v-model="workLocations" :options="locationOptions" :props="ismultiple" collapse-tags
-            collapse-tags-tooltip clearable placeholder="请选择使用该NVR的车间" @change="handleCascaderChange" />
+          <el-tree-select class="temp" v-model="workLocations" :data="locationOptions" multiple
+            :render-after-expand="false" placeholder="请选择使用该NVR的车间" @change="handleCascaderChange" />
+          <!-- <el-cascader v-model="workLocations" :options="locationOptions" :props="ismultiple" collapse-tags
+            collapse-tags-tooltip clearable placeholder="请选择使用该NVR的车间" @change="handleCascaderChange" /> -->
         </el-form-item>
         <el-form-item label="负责人:" prop="principal">
           <el-input v-model="formParams.principal" placeholder="请输入设备安装负责人" />
@@ -66,10 +68,11 @@ const emit = defineEmits(['form-submit', 'form-edit']);
 
 const isDrawer = ref(false);
 const formRef: any = ref(null);
-const ismultiple = { multiple: true };
+// const ismultiple = { multiple: true };
 
 const { locationOptions, getLocationOptions, getWorkLocation } = useWorkLocation();
-const workLocations = ref<[number | undefined, number | undefined] | []>([]);
+// const workLocations = ref<[number | undefined, number | undefined] | []>([]);
+const workLocations = ref<number[]>([]);
 
 const codeError = ref('');
 const ipError = ref('');
@@ -130,9 +133,7 @@ const rules: FormRules = {
 };
 
 const handleCascaderChange = () => {
-  formParams.value.workshopList = workLocations.value.map((item) => {
-    return item[1];
-  })
+  formParams.value.workshopList = workLocations.value;
 };
 
 const formSubmit = () => {
@@ -234,4 +235,10 @@ onMounted(() => {
   width: 100%;
   margin-top: 10px;
 }
+
+:deep(.temp .el-select__selection) {
+  min-height: 24px;
+  max-height: 55px;
+  overflow: auto;
+}
 </style>

+ 2 - 2
src/views/cameras/nvrlist/constant.ts

@@ -11,7 +11,7 @@ export const brands = [
 
 // 公司-车间 级联可选项
 type Location = {
-  value: number;
+  value: string;
   label: string;
   children: {
     value: number;
@@ -31,7 +31,7 @@ export function useWorkLocation() {
               return { value: x.id, label: x.name };
             }) || [];
           return {
-            value: item.id,
+            value: `${item.id}+${item.name}`,
             label: item.name,
             children: newChildren,
           };