用户管理-修改表格样式，配置制造工厂名称显示

src/views/system/user/index.vue

@@ -118,15 +118,14 @@
           v-loading="loading"
           :data="userList"
           @selection-change="handleSelectionChange"
+          border
       >
 <!--        <el-table-column type="selection" width="50" align="center" />-->
-        <el-table-column
-            v-if="columns[0].visible"
-            key="userId"
-            label="序号"
-            align="center"
-            prop="userId"
-        />
+        <el-table-column  label="序号" align="center">
+          <template #default="scope">
+            {{scope.$index + 1}}
+          </template>
+        </el-table-column>
         <el-table-column label="用户类型" align="center" prop="userType" sortable>
           <template #default="scope">
             <dict-tag :options="sys_user_type" :value="scope.row.userType" />
@@ -140,7 +139,12 @@
             sortable
             prop="dept.deptName"
             :show-overflow-tooltip="true"
-        />
+        >
+          <template #default="scope">
+            <!-- 判断 dept.deptName 是否为空 -->
+            {{ scope.row.dept?.deptName || '--' }}
+          </template>
+        </el-table-column>
         <el-table-column
             v-if="columns[1].visible"
             key="userName"
@@ -170,7 +174,11 @@
             align="center"
             prop="divsion"
             :show-overflow-tooltip="true"
-        />
+        >
+          <template #default="scope">
+            {{ scope.row.divsion || '--' }}
+          </template>
+        </el-table-column>
         <el-table-column
             v-if="columns[2].visible"
             key="factoryName"
@@ -178,7 +186,11 @@
             align="center"
             prop="factoryName"
             :show-overflow-tooltip="true"
-        />
+        >
+          <template #default="scope">
+            {{ scope.row.factoryName || '--' }}
+          </template>
+        </el-table-column>
         <el-table-column
             v-if="columns[4].visible"
             key="phonenumber"
@@ -186,7 +198,11 @@
             align="center"
             prop="phonenumber"
             width="120"
-        />
+        >
+          <template #default="scope">
+            {{ scope.row.phonenumber || '--' }}
+          </template>
+        </el-table-column>
         <el-table-column label="用户状态" align="center" prop="status" sortable>
           <template #default="scope">
             <dict-tag :options="sys_user_status" :value="scope.row.status" />
@@ -199,7 +215,11 @@
             align="center"
             prop="roleNames"
             width="120"
-        />
+        >
+          <template #default="scope">
+            {{ scope.row.roleNames || '--' }}
+          </template>
+        </el-table-column>
         <el-table-column
             v-if="columns[7].visible"
             label="同步时间"
@@ -209,7 +229,7 @@
             width="160"
         >
           <template #default="scope">
-            <span>{{ parseTime(scope.row.updateTime) }}</span>
+            <span>{{ parseTime(scope.row.updateTime) || "--" }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -222,29 +242,29 @@
               <el-button
                   v-hasPermi="['system:user:edit']"
                   link
-                  v-if="scope.row.userId === 1"
+                  v-if="scope.row.userType === '00'"
                   type="primary"
                   @click="handleUpdate(scope.row)"
               >修改</el-button>
               <el-button
                   v-hasPermi="['system:user:edit']"
                   link
-                  v-if="scope.row.userId !== 1"
+                  v-if="scope.row.userType !== '00'"
                   type="primary"
                   @click="handleAuthRole(scope.row)"
               >分配角色</el-button>
               <el-button
                   link
-                  v-if="scope.row.userId !== 1"
+                  v-if="scope.row.userType !== '00'"
                   type="primary"
                   @click="divsionDialog = true"
               >配置事业部</el-button> <!--v-hasPermi="['system:user:edit']"-->
               <el-button
                   v-hasPermi="['system:user:edit']"
                   link
-                  v-if="scope.row.userId !== 1"
+                  v-if="scope.row.userType !== '00'"
                   type="primary"
-                  @click="dialogFactory = true"
+                  @click="openFactoryDialog(scope.row)"
               >配置制造工厂</el-button>
           </template>
         </el-table-column>
@@ -285,6 +305,7 @@
           <el-checkbox-group v-model="selectedFactories">
             <div style="display: flex; flex-wrap: wrap;">
               <div v-for="(factory, index) in allFactories" :key="index" style="width: 33%; margin-bottom: 10px;">
+                <!-- 在 el-checkbox 标签中 -->
                 <el-checkbox :label="factory">{{ factory }}</el-checkbox>
               </div>
             </div>
@@ -299,6 +320,27 @@
       </template>
     </el-dialog>
 
+<!--  分配角色  -->
+    <el-dialog v-model="dialogRole" title="分配角色" width="600px" append-to-body>
+      <el-form ref="userRef" :model="form" label-width="80px">
+        <el-form-item prop="roleNames">
+          <el-checkbox-group v-model="selectedFactories">
+            <div style="display: flex; flex-wrap: wrap;">
+              <div v-for="(role, index) in allRoles" :key="index" style="width: 33%; margin-bottom: 10px;">
+                <el-checkbox :label="role">{{ role }}</el-checkbox>
+              </div>
+            </div>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">保 存</el-button>
+      </span>
+      </template>
+    </el-dialog>
+
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog v-model="open" :title="title" width="600px" append-to-body>
       <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
@@ -461,6 +503,9 @@ import {
 } from '@/api/system/user'
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
+import { getAllFactoryName } from "@/api/system/factory";
+import { getRoleAll,listRole } from "@/api/system/role";
+import {watch} from "vue";
 
 const router = useRouter()
 const appStore = useAppStore()
@@ -472,11 +517,13 @@ const { sys_normal_disable, sys_user_sex, sys_user_status, sys_user_type } = pro
   'sys_user_type'
 )
 const dialogFactory = ref(false)
+const dialogRole = ref(false)
 const divsionDialog = ref(false)
 // 选中的工厂列表
 const selectedFactories = ref([]);
 // 选中的事业部
 const selecteDivsions = ref([]);
+const selectedRoles = ref([]);
 const userList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -526,10 +573,10 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    userName: undefined,
-    phonenumber: undefined,
-    status: undefined,
-    deptId: undefined,
+    userName: null,
+    phonenumber: null,
+    status: null,
+    deptId: null,
   },
   rules: {
     userName: [
@@ -576,7 +623,10 @@ const data = reactive({
 })
 
 const { queryParams, form, rules } = toRefs(data)
-
+// 所有可选的工厂列表
+const allFactories = ref([])
+// 所有可选的角色
+const allRoles = ref([])
 const isEditMode = computed(() => {
   return title.value === "编辑";
 });
@@ -605,41 +655,43 @@ watch(() => form.value.divsion, (newVal) => {
   }
 }, { immediate: true });
 
-// 监听选中的工厂变化，更新表单数据
-watch(selecteDivsions, (newVal) => {
-  const divsionObj = {};
-  newVal.forEach((item, index) => {
-    divsionObj[index] = item;
-  });
-  form.value.divsion = JSON.stringify(divsionObj);
-}, { deep: true });
-
-// 所有可选的工厂列表
-const allFactories = ref([
-  '整车二工厂', '整车三工厂', '整车四工厂',
-  '智造一工厂', '智造二工厂', '大连工厂',
-  '青岛工厂', '鄂尔多斯工厂', '开封工厂',
-  '城南工厂', '城北工厂', '齐河工厂',
-  '石家庄工厂'
-]);
-watch(() => form.value.factoryName, (newVal) => {
+// 打开配置制造工厂对话框
+function openFactoryDialog(row) {
+  dialogFactory.value = true;
+  // 直接使用当前行的 factoryName（假设是数组）
+  selectedFactories.value = row.factoryName ? row.factoryName.split(',') : [];
+}
+// 解析 factoryName（假设存储为 JSON 字符串数组）
+function parseFactoryName(factoryName) {
   try {
-    const factoryObj = JSON.parse(newVal || '{}');
-    selectedFactories.value = Object.values(factoryObj);
+    return JSON.parse(factoryName || '[]'); // 默认空数组
   } catch (e) {
-    selectedFactories.value = [];
+    return [];
   }
-}, { immediate: true });
+}
 
 // 监听选中的工厂变化，更新表单数据
 watch(selectedFactories, (newVal) => {
-  const factoryObj = {};
-  newVal.forEach((item, index) => {
-    factoryObj[index] = item;
-  });
-  form.value.factoryName = JSON.stringify(factoryObj);
+  form.value.factoryName = JSON.stringify(newVal); // 存储为 JSON 字符串
 }, { deep: true });
 
+
+// 获取工厂数据的方法
+const fetchFactories = async () => {
+  try {
+    const response = await getAllFactoryName();
+    // 提取factoryName字段
+    allFactories.value = response.data.map(item => item.factoryName);
+  } catch (error) {
+    console.error('获取工厂列表失败:', error);
+  }
+};
+// 获取角色的方法
+/*const fetchRoles = async () => {
+    const response = await listRole();
+    allRoles.value = response.data.map(item => item.roleName);
+};*/
+
 /** 查询用户列表 */
 function getList() {
   loading.value = true
@@ -755,6 +807,7 @@ function handleCommand(command, row) {
 
 /** 跳转角色分配 */
 function handleAuthRole(row) {
+  dialogRole.value = true
   const userId = row.userId
   router.push('/system/user-auth/role/' + userId)
 }
@@ -832,18 +885,18 @@ function submitFileForm() {
 /** 重置操作表单 */
 function reset() {
   form.value = {
-    userId: undefined,
-    deptId: undefined,
-    userName: undefined,
-    nickName: undefined,
-    password: undefined,
-    phonenumber: undefined,
-    email: undefined,
-    sex: undefined,
+    userId: null,
+    deptId: null,
+    userName: null,
+    nickName: null,
+    password: null,
+    phonenumber: null,
+    email: null,
+    sex: null,
     roleNames: '超级管理员',
     status: '0',
     userType: '00',
-    remark: undefined,
+    remark: null,
     postIds: [],
     roleIds: [],
   }
@@ -912,7 +965,10 @@ function submitForm() {
     }
   })
 }
-
+onMounted(() => {
+  fetchFactories();
+  //fetchRoles();
+});
 getDeptTree()
 getList()
 </script>