代码优化

src/api/company-manage/index.js

@@ -9,8 +9,8 @@ export const addCompanyAPI = (data) => {
 /**
  *  @data 查询参数 公司列表查询接口
  */
-export const getDeptListAPI = (data = {}) => {
+export const getDeptListAPI = (data) => {
-    return request.get('/system/dept/deptList', data)
+    return request.get('/system/dept/deptList', { params: data })
 }
 /**
  *  @id 查询参数 获取详情
@@ -22,5 +22,11 @@ export const getDeptDetailsAPI = (id) => {
  *  @data 编辑参数 编辑公司信息提交接口
  */
 export const editCompanyAPI = (data) => {
-    return request.post('/system//dept/edit', data)
+    return request.post('/system/dept/edit', data)
+}
+/**
+ *  @data 编辑参数 编辑公司信息提交接口
+ */
+export const editDeptLogoutAPI = (data) => {
+    return request.post('/system/dept/deptLogout', data)
 }

src/views/company-manage/components/add-form.vue

@@ -17,20 +17,44 @@
             >
                 <TitleTip :titleText="`公司信息`" />
                 <el-form-item label="公司名称：" prop="deptName">
-                    <el-input v-model="addOrEditForm.deptName" />
+                    <el-input v-model="addOrEditForm.deptName" clearable />
                 </el-form-item>
                 <el-form-item label="公司简称：" prop="deptAbbreviation">
-                    <el-input v-model="addOrEditForm.deptAbbreviation" />
+                    <el-input
+                        v-model="addOrEditForm.deptAbbreviation"
+                        clearable
+                    />
                 </el-form-item>
                 <el-form-item label="公司概述：" prop="remark">
-                    <el-input v-model="addOrEditForm.remark" type="textarea" />
+                    <el-input
+                        v-model="addOrEditForm.remark"
+                        type="textarea"
+                        :autosize="{ minRows: 2, maxRows: 10 }"
+                        clearable
+                    />
+                </el-form-item>
+                <el-form-item
+                    label="公司状态："
+                    prop="status"
+                    v-if="formType == 2"
+                >
+                    <!-- <el-input
+                        v-model="addOrEditForm.remark"
+                        type="textarea"
+                        clearable
+                    /> -->
+
+                    <el-radio-group v-model="addOrEditForm.status">
+                        <el-radio label="0"> 启用 </el-radio>
+                        <el-radio label="1"> 停用 </el-radio>
+                    </el-radio-group>
                 </el-form-item>
                 <TitleTip :titleText="`基础设置`" />
                 <el-form-item label="默认密码：" prop="password">
-                    <el-input disabled v-model="addOrEditForm.password" />
+                    <el-input v-model="addOrEditForm.password" clearable />
                 </el-form-item>
                 <el-form-item label="LOGO设置：" prop="logo">
-                    <div class="upload-container">
+                    <div class="upload-container" v-if="formType != 1">
                         <el-upload
                             :limit="1"
                             :action="uploadFileUrl"
@@ -55,13 +79,28 @@
                             <br />
                         </div>
                     </div>
+                    <div
+                        v-else
+                        class="view-logo-box"
+                        @click="onViewLogoImg(addOrEditForm.logo)"
+                    >
+                        <img
+                            :src="addOrEditForm.logo"
+                            style="
+                                display: block;
+                                max-width: 100%;
+                                max-height: 100%;
+                                margin: 0 auto;
+                            "
+                        />
+                    </div>
                 </el-form-item>
                 <TitleTip :titleText="`默认管理员`" />
                 <el-form-item label="姓名：" prop="nickName">
-                    <el-input v-model="addOrEditForm.nickName" />
+                    <el-input v-model="addOrEditForm.nickName" clearable />
                 </el-form-item>
-                <el-form-item label="手机号码：" prop="phonenumber">
+                <el-form-item label="手机号码：(登录账号)" prop="phonenumber">
-                    <el-input v-model="addOrEditForm.phonenumber" />
+                    <el-input v-model="addOrEditForm.phonenumber" clearable />
                 </el-form-item>
                 <el-form-item label="角色：" prop="roles">
                     <el-input disabled v-model="addOrEditForm.roles" />
@@ -92,7 +131,10 @@
                     }
                 "
             >
-                <ImagePreview :width="240" :height="240" :url="previewUrl" />
+                <img
+                    :src="previewUrl"
+                    style="display: block; max-width: 100%; margin: 0 auto"
+                />
             </el-dialog>
         </el-dialog>
     </div>
@@ -104,6 +146,7 @@ import {
     getDeptDetailsAPI,
     editCompanyAPI,
 } from '@/api/company-manage/index.js'
+import { validateNewPassword } from '@/utils/validate'
 import { getToken } from '@/utils/auth'
 export default {
     props: {
@@ -142,6 +185,7 @@ export default {
                 userName: '',
                 orderNum: 200,
                 fileList: [],
+                status: '',
                 roles: '系统管理员',
             },
             addOrEditFormRef: {
@@ -151,6 +195,12 @@ export default {
                         message: '请输入公司名称',
                         trigger: 'blur',
                     },
+                    {
+                        min: 1,
+                        max: 30,
+                        message: '长度在 1 到 30 个字符',
+                        trigger: 'blur',
+                    },
                 ],
                 deptAbbreviation: [
                     {
@@ -158,6 +208,19 @@ export default {
                         message: '请输入公司简称',
                         trigger: 'blur',
                     },
+                    {
+                        min: 1,
+                        max: 20,
+                        message: '长度在 1 到 20 个字符',
+                        trigger: 'blur',
+                    },
+                ],
+                status: [
+                    {
+                        required: true,
+                        message: '请选择公司状态',
+                        trigger: 'change',
+                    },
                 ],
                 remark: [
                     {
@@ -165,6 +228,12 @@ export default {
                         message: '请输入公司概述',
                         trigger: 'blur',
                     },
+                    {
+                        min: 1,
+                        max: 150,
+                        message: '长度在 1 到 150 个字符',
+                        trigger: 'blur',
+                    },
                 ],
                 password: [
                     {
@@ -172,6 +241,7 @@ export default {
                         message: '请输入默认密码',
                         trigger: 'blur',
                     },
+                    { validator: validateNewPassword, trigger: 'blur' },
                 ],
                 logo: [
                     {
@@ -186,6 +256,12 @@ export default {
                         message: '请输入管理员姓名',
                         trigger: 'blur',
                     },
+                    {
+                        min: 1,
+                        max: 20,
+                        message: '长度在 1 到 20 个字符',
+                        trigger: 'blur',
+                    },
                 ],
                 phonenumber: [
                     {
@@ -242,6 +318,8 @@ export default {
                         phonenumber,
                         deptId,
                         parentId,
+                        userId,
+                        status,
                     } = this.addOrEditForm
                     const params = {
                         deptName,
@@ -259,7 +337,9 @@ export default {
 
                     if (this.formType == 2) {
                         params.deptId = deptId
+                        params.status = status
                         params.parentId = parentId
+                        params.sysUser.userId = userId
                     }
                     const SEND_FUN =
                         this.formType == 2 ? editCompanyAPI : addCompanyAPI
@@ -300,10 +380,10 @@ export default {
             this.addOrEditForm.logo = ''
         },
         handlePreview(file) {
-            console.log(file, '查看')
             this.dialogInnerVisible = true
             this.previewUrl = file.url
         },
+
         handleSuccess(res) {
             if (res.code === 200) {
                 this.addOrEditForm.logo = res.data.url
@@ -313,10 +393,19 @@ export default {
             }
             this.$modal.closeLoading()
         },
+        onViewLogoImg(url) {
+            this.dialogInnerVisible = true
+            this.previewUrl = url
+        },
 
         onDefaultLogo() {
-            this.addOrEditForm.fileList = []
+            this.addOrEditForm.fileList = [
-            this.addOrEditForm.logo = ''
+                {
+                    url: 'http://36.33.26.201:17788/statics/2025/01/03/logo_20250103151123A002.svg',
+                },
+            ]
+            this.addOrEditForm.logo =
+                'http://36.33.26.201:17788/statics/2025/01/03/logo_20250103151123A002.svg'
         },
         // 文件个数超出
         handleExceed() {
@@ -324,10 +413,6 @@ export default {
         },
     },
     async mounted() {
-        this.getConfigKey('sys.user.initPassword').then((res) => {
-            this.addOrEditForm.password = res.msg
-        })
-
         if (this.formType === 1 || this.formType === 2) {
             // console.log(this.detailsId, 'detailsId')
             const { data: res } = await getDeptDetailsAPI(this.detailsId)
@@ -339,36 +424,30 @@ export default {
                 logo,
                 parentId,
                 sysUser,
+                status,
             } = res
 
-            const { userName, password, nickName } = sysUser
+            const { userName, password, nickName, userId } = sysUser
             Object.assign(this.addOrEditForm, {
                 deptName,
                 deptAbbreviation,
                 remark,
                 deptId,
+                userId,
                 logo,
                 parentId,
                 phonenumber: userName,
                 userName,
                 password,
                 nickName,
+                status,
                 fileList: [{ url: logo }],
             })
-        } else {
+        }
-            this.addOrEditForm = {
+        if (this.formType === 3) {
-                deptName: '',
+            this.getConfigKey('sys.user.initPassword').then((res) => {
-                deptAbbreviation: '',
+                this.addOrEditForm.password = res.msg
-                remark: '',
+            })
-                password: '',
-                logo: '',
-                nickName: '',
-                phonenumber: '',
-                userName: '',
-                orderNum: 200,
-                fileList: [],
-                roles: '系统管理员',
-            }
         }
     },
     watch: {
@@ -424,6 +503,12 @@ export default {
         }
     }
 }
+
+.view-logo-box {
+    width: 120px;
+    height: 120px;
+    cursor: pointer;
+}
 ::v-deep .el-upload {
     width: 120px;
     height: 120px;

src/views/company-manage/components/company-card.vue

@@ -6,7 +6,7 @@
             </div>
             <div style="flex: 1; padding-left: 14px">
                 <div class="company-title">
-                    <span> {{ companyInfo.deptName }} </span>
+                    <div> {{ companyInfo.deptName }} </div>
                     <el-tag
                         type="success"
                         effect="dark"
@@ -33,7 +33,7 @@
                     </el-tag>
                 </div>
 
-                <p> {{ companyInfo.remark }} </p>
+                <p class="company-remark"> {{ companyInfo.remark }} </p>
             </div>
         </div>
 
@@ -48,7 +48,7 @@
             </div>
         </div>
         <div class="items-card">
-            <el-button
+            <!-- <el-button
                 type="text"
                 :key="index"
                 :icon="item.icon"
@@ -56,13 +56,35 @@
                 @click="onClickButton(item.type)"
             >
                 {{ item.btn_name }}
+            </el-button> -->
+            <el-button
+                type="text"
+                icon="el-icon-chat-dot-round"
+                @click="onClickButton(1)"
+            >
+                详情
+            </el-button>
+            <el-button
+                type="text"
+                icon="el-icon-edit"
+                @click="onClickButton(2)"
+            >
+                编辑
+            </el-button>
+            <el-button
+                type="text"
+                icon="el-icon-delete"
+                @click="onClickButton(3)"
+                v-if="companyInfo.status != 2"
+            >
+                注销
             </el-button>
         </div>
     </div>
 </template>
 
 <script>
-import { editCompanyAPI } from '@/api/company-manage/index.js'
+import { editDeptLogoutAPI } from '@/api/company-manage/index.js'
 export default {
     props: {
         companyInfo: {
@@ -73,14 +95,26 @@ export default {
     data() {
         return {
             userList: [
-                { title_name: '用户', count: 20 },
+                { title_name: '用户', count: 0 },
-                { title_name: '项目', count: 20 },
+                { title_name: '项目', count: 0 },
-                { title_name: '设备', count: 20 },
+                { title_name: '设备', count: 0 },
             ],
             btnList: [
-                { btn_name: '详情', icon: 'el-icon-chat-dot-round', type: 1 },
+                {
-                { btn_name: '编辑', icon: 'el-icon-edit', type: 2 },
+                    btn_name: '详情',
-                { btn_name: '注销', icon: 'el-icon-delete', type: 3 },
+                    icon: 'el-icon-chat-dot-round',
+                    type: 1,
+                },
+                {
+                    btn_name: '编辑',
+                    icon: 'el-icon-edit',
+                    type: 2,
+                },
+                {
+                    btn_name: '注销',
+                    icon: 'el-icon-delete',
+                    type: 3,
+                },
             ],
         }
     },
@@ -90,20 +124,19 @@ export default {
             if (type === 1 || type === 2) {
                 this.$emit('openAddForm', type, this.companyInfo.deptId)
             } else {
+                if (this.companyInfo.status == 2) {
+                    this.$modal.msgError('该公司已注销，无法重复注销')
+                    return
+                }
                 this.$modal
                     .confirm('是否确认注销')
                     .then(async () => {
                         // 组装参数
-                        const { deptId, parentId, deptName, orderNum } =
+                        const { deptId } = this.companyInfo
-                            this.companyInfo
                         const params = {
                             deptId,
-                            parentId,
-                            status: '2',
-                            deptName,
-                            orderNum,
                         }
-                        const res = await editCompanyAPI(params)
+                        const res = await editDeptLogoutAPI(params)
                         if (res.code === 200) {
                             this.$modal.msgSuccess('注销成功')
                             this.$emit('updateTableList')
@@ -134,8 +167,13 @@ export default {
             width: 100%;
             display: flex;
             justify-content: space-between;
-            & span:first-child {
+            & div:first-child {
                 font-weight: bold;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                -webkit-line-clamp: 1;
+                text-overflow: ellipsis;
             }
         }
 
@@ -143,6 +181,14 @@ export default {
             font-size: 14px;
             color: #abafb3;
         }
+
+        .company-remark {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            -webkit-line-clamp: 2;
+            text-overflow: ellipsis;
+        }
     }
     .items-card {
         margin-top: 16px;

src/views/company-manage/index.vue

@@ -3,7 +3,11 @@
     <div class="app-container">
         <el-form ref="queryForm" size="small" :inline="true">
             <el-form-item>
-                <el-input placeholder="请输入搜索关键词">
+                <el-input
+                    placeholder="请输入搜索关键词"
+                    v-model="queryParams.keyWord"
+                    clearable
+                >
                     <i
                         slot="suffix"
                         class="el-icon-search"
@@ -75,15 +79,17 @@ export default {
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
+                keyWord: '',
             },
         }
     },
     methods: {
         onRegisterCompany() {
+            this.formType = 3
             this.formDialogVisible = true
         },
         async getCompanyList() {
-            const res = await getDeptListAPI()
+            const res = await getDeptListAPI(this.queryParams)
             this.companyList = res.rows
             this.total = res.total
         },