修改样式

src/views/admin/orgInfo/components/OrgApplyHldyForm.vue

@@ -1,25 +1,53 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer >
       <template #detail>
         <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
           name="OrgApplyInfoForm">
-
           <a-row class="card-class">
             <a-col :span="24" style="border-bottom: 2px solid #f7f7f7; margin-bottom: 14px;">
-              <SectionDivider :title="'护理单元'" />
+              <SectionDivider :title="'护理区域'" />
             </a-col>
-            <a-col :span="8" v-for="(item, index) in dataSource" style="padding: 7px;">
-              <a-card :title="`NUID：`+item.nuId" >
-                <!-- <template #extra>{{item.nuType}}</template> -->
-                <p>摄像头：{{item.sxtList}}</p>
-                <p>电表：{{item.dbList}}</p>
-                <p>水表：{{item.sbList}}</p>
-                <p>温湿度计：{{item.wsdjList}}</p>
+            <a-col :span="12" v-for="(item, index) in dataSource" style="padding: 7px;">
+              <a-card>
+                <a-row>
+                  <a-col :span="12">
+                    <view style="font-size: 16px;font-weight: bold;">名 称：{{item.nuName}}</view>
+                  </a-col>
+                  <a-col :span="12" style="text-align: right;">
+                    <view style="font-size: 14px;font-weight: bold;color:darkgrey;">NUID：{{item.nuId}}</view>
+                  </a-col>
+                </a-row>
+
+                <div style="width:100%;">
+                  <a-tabs v-model:activeKey="item.activeKey" style="height: 220px;" >
+                    <a-tab-pane key="0" tab="基础功能">
+                      <div>基础功能：</div>
+                      <span  v-for="(item2,index) in item.children" :key="index">  
+                        <a-checkbox  style="margin-top:10px;" checked readonly disabled >{{ item2.nuName }}</a-checkbox>
+                      </span>
+                      <span  v-for="(item2,index) in item.children" :key="index">
+                        <div  v-if="item2.children.length>0">
+                          <div style="margin-top: 20px;">{{ item2.nuName }}：</div>
+                          <span v-for="(item3,index) in item2.children" :key="index">
+                            <a-checkbox  style="margin-top:10px;" checked readonly disabled>{{ item3.nuName }}</a-checkbox>
+                          </span>
+                        </div>
+                      </span>
+                      <span v-if="item.children.length == 0">暂无基础功能</span>
+                    </a-tab-pane>
+                    <a-tab-pane key="1" tab="物联设备">
+                      <div>物联设备：</div>
+                      <div style="margin-top: 10px;">摄像头：{{item.sxtList?item.sxtList+"个":'-'}}</div>
+                      <div style="margin-top: 10px;">电表：{{item.dbList?item.dbList+"个":'-'}}</div>
+                      <div style="margin-top: 10px;">水表：{{item.sbList?item.sbList+"个":'-'}}</div>
+                      <div style="margin-top: 10px;">温湿度计：{{item.wsdjList?item.wsdjList+"个":'-'}}</div>
+                    </a-tab-pane>
+                  </a-tabs>
+                </div>
               </a-card>
             </a-col>
           </a-row>
-
         </a-form>
       </template>
     </JFormContainer>
@@ -44,6 +72,8 @@ const formRef = ref();
 const useForm = Form.useForm;
 const emit = defineEmits(['register', 'ok']);
 const dataSource = ref<any>([]);
+const buttonName = ref<any>([]);
+const activeKey = ref<any>('1');
 const formData = reactive<Record<string, any>>({
   id: '',
   openId: '',
@@ -96,6 +126,9 @@ const formData = reactive<Record<string, any>>({
   workOrderStatus_dictText: '',
   auditBy: '',
   auditTime: '',
+  kzgn: '',
+  kzgnTwo: '',
+  buttonCheck:'',
 
 });
 const { createMessage } = useMessage();
@@ -144,7 +177,16 @@ function edit(record) {
     console.log("🚀 ~ edit ~ formData.orgCode:", record.orgCode)
     defHttp.get({ url: '/api/nuBaseInfo/getNuListByOrgCode', params: { orgCode: record.orgCode } }).then(res => { 
     console.log("🚀 ~ edit ~ res:", res)
-    dataSource.value = res;
+    // 为每个数据项添加 activeKey
+    if (res && Array.isArray(res)) {
+        dataSource.value = res.map(item => ({
+          ...item,
+          activeKey: '0'  // 默认激活基础功能标签页
+        }));
+      } else {
+        dataSource.value = [];
+      }
+    // dataSource.value = res;
     })
 
 
@@ -182,4 +224,17 @@ defineExpose({
   margin-bottom: 14px;
 
 }
+
+</style>
+<style>
+/* .ant-checkbox-checked .ant-checkbox-inner {
+  background-color: #ffffff;
+  border-color: #1890ff;
+}
+.ant-checkbox .ant-checkbox-inner::after{
+  border: 2px solid #1890ff;
+} */
+.ant-checkbox-disabled + span{
+  color: black;
+}
 </style>

src/views/admin/orgInfo/components/OrgApplyHldyModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-drawer :title="title" :width="`70vw`"  v-model:visible="visible" :closable="true"
+  <a-drawer :title="title" :width="`1000px`"  v-model:visible="visible" :closable="true"
     :footer-style="{ textAlign: 'right' }" :bodyStyle="{padding:'0px'}" @close="handleCancel">
     <OrgApplyHldyForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
     </OrgApplyHldyForm>