From 5e2aafeede13d337380f736567caf74f49713be7 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Fri, 09 Aug 2024 14:38:32 +0800
Subject: [PATCH] 代码优化

---
 src/views/gzll/owners.vue |  492 ++++++++++++++++++++++++++++++------------------------
 1 files changed, 275 insertions(+), 217 deletions(-)

diff --git a/src/views/gzll/owners.vue b/src/views/gzll/owners.vue
index 1ddf494..ae7209f 100644
--- a/src/views/gzll/owners.vue
+++ b/src/views/gzll/owners.vue
@@ -10,9 +10,19 @@
                     @click="manageMember(scope.row)">业委会成员
                 </el-button>
             </template>
+
+            <template slot-scope="{ row, size }" slot="status">
+                <el-tag :size="size" :type="showStatus(row.status).type" v-text="showStatus(row.status).text">
+                </el-tag>
+            </template>
+            <template slot-scope="{row, size}" slot="mobile">
+                <el-button :size="size" type="text" @click="showStringDispose(row, 'mobileflag')"
+                    v-text="textDispose(row, 'mobileflag', 'mobile')">
+                </el-button>
+            </template>
         </avue-crud>
 
-        <el-drawer title="业委会成员" size="40%" append-to-body :visible.sync="memberFlag" :direction="'rtl'">
+        <el-drawer title="业委会成员" size="60%" append-to-body :visible.sync="memberFlag" :direction="'rtl'">
             <ownersMemberManager ref="ownersMemberManager" />
         </el-drawer>
     </basic-container>
@@ -51,6 +61,12 @@
             selectionList: [],
             memberFlag: false,
             option: {
+                labelWidth: 120,
+                searchLabelWidth: 96,
+                searchShow: true,
+                searchMenuSpan: 3,
+                menuWidth: 300,
+
                 // menu: false,
                 // addBtn: false,
                 border: true,
@@ -60,249 +76,257 @@
                 calcHeight: 54,
                 dialogWidth: 950,
                 tip: false,
-                searchShow: true,
-                searchMenuSpan: 3,
                 //stripe:true,
                 viewBtn: true,
                 excelBtn: true,
                 dialogClickModal: false,
-                column: [
-                    {
-                        hide: true,
-                        label: "小区",
-                        prop: "areaId",
-                        searchSpan: 5,
-                        type: 'tree',
-                        dicUrl: `/api/blade-district/district/getDistrictTree`,
-                        props: {
-                            label: "name",
-                            value: "id"
-                        },
-                        defaultExpandedKeys: ["361102003"],
-                        cascader: ['principalId'],
-                        span: 10,
-                        labelWidth: 120,
-                        overHidden: true,
-                        rules: [{
-                            required: true,
-                            message: "请选择小区",
-                            trigger: "blur",
-                        },],
+                column: [{
+                    hide: true,
+                    label: "小区",
+                    prop: "areaId",
+                    searchSpan: 5,
+                    type: 'tree',
+                    dicUrl: `/api/blade-district/district/getDistrictTree`,
+                    props: {
+                        label: "name",
+                        value: "id"
                     },
+                    defaultExpandedKeys: ["361102003"],
+                    cascader: ['principalId'],
+                    overHidden: true,
+                    change: ({
+                        value,
+                        column,
+                        item,
+                        dic
+                    }) => {
+                        this.form.areaName = ''
 
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        offset: 2,
-                        label: "业委会名称",
-                        prop: "name",
-                        search: true,
-                        searchLabelWidth: 136,
-                        rules: [{
-                            required: true,
-                            message: "请输入业委会名称",
-                            trigger: "blur",
-                        },],
+                        if (value) {
+                            this.form.areaName = item.name
+                        }
                     },
+                    rules: [{
+                        required: true,
+                        message: "请选择小区",
+                        trigger: "blur",
+                    },],
+                },
 
-                    {
-                        width: 220,
-                        overHidden: true,
-                        label: '小区名称',
-                        addDisplay: false,
-                        editDisplay: false,
-                        viewDisplay: false,
-                        prop: "areaName"
-                    },
+                {
+                    overHidden: true,
+                    width: 120,
+                    label: "业委会名称",
+                    prop: "name",
+                    search: true,
+                    searchLabelWidth: 90,
+                    rules: [{
+                        required: true,
+                        message: "请输入业委会名称",
+                        trigger: "blur",
+                    },],
+                },
 
-                    {
-                        label: "总人数",
-                        prop: "peopleTotal",
-                        display: false,
-                    },
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "业委会负责人",
-                        prop: "principalId",
-                        type: "tree",
-                        remote: true,
-                        props: {
-                            label: 'name',
-                            value: 'id'
-                        },
-                        hide: true,
-                        dicUrl: `/api/blade-system/user/searchUserByDistrictId?districtId={{key}}`,
-                        defaultExpandedKeys: [],
-                        rules: [{
-                            required: true,
-                            message: "请选择业委会负责人",
-                            trigger: "blur",
-                        },],
-                    },
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "负责人名称",
-                        offset: 2,
-                        prop: "principalName",
-                        rules: [{
-                            required: true,
-                            message: "请输入负责人名称",
-                            trigger: "blur",
-                        },],
-                    },
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "负责人手机号",
-                        prop: "mobile",
-                        rules: [{
-                            required: true,
-                            message: "请输入负责人手机号",
-                            trigger: "blur",
-                        },],
-                    },
+                {
+                    overHidden: true,
+                    width: 220,
+                    label: '小区名称',
+                    addDisplay: false,
+                    editDisplay: false,
+                    viewDisplay: false,
+                    prop: "areaName"
+                },
 
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "业委会届别",
-                        offset: 2,
-                        prop: "session",
-                        type: "number",
-                        rules: [{
-                            required: true,
-                            message: "请输入业委会届别",
-                            trigger: "blur",
-                        },],
+                {
+                    label: "总人数",
+                    prop: "peopleTotal",
+                    display: false,
+                },
+                {
+                    label: "业委会负责人",
+                    prop: "principalId",
+                    type: "tree",
+                    remote: true,
+                    props: {
+                        label: 'name',
+                        value: 'id'
                     },
+                    hide: true,
+                    dicUrl: `/api/blade-system/user/searchUserByDistrictId?districtId={{key}}`,
+                    defaultExpandedKeys: [],
+                    change: ({
+                        value,
+                        column,
+                        item,
+                        dic
+                    }) => {
+                        this.form.mobile = ''
+                        this.form.principalName = ''
 
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "成立时间",
-                        prop: "establishTime",
-                        type: "date",
-                        format: "yyyy-MM-dd",
-                        valueFormat: "yyyy-MM-dd",
+                        if (value) {
+                            this.form.mobile = item.phone
+                            this.form.principalName = item.name
+                        }
                     },
+                    rules: [{
+                        required: true,
+                        message: "请选择业委会负责人",
+                        trigger: "blur",
+                    },],
+                },
+                {
+                    width: 120,
+                    label: "负责人名称",
+                    prop: "principalName",
+                    display: false,
+                    rules: [{
+                        required: true,
+                        message: "请输入负责人名称",
+                        trigger: "blur",
+                    },],
+                },
+                {
+                    width: 120,
+                    label: "负责人手机号",
+                    prop: "mobile",
+                    rules: [{
+                        required: true,
+                        message: "请输入负责人手机号",
+                        trigger: "blur",
+                    },],
+                    slot: true
+                },
 
-                    {
-                        span: 20,
-                        labelWidth: 120,
-                        label: "所在地址",
-                        prop: "location",
+                {
+                    width: 120,
+                    label: "业委会届别",
+                    prop: "session",
+                    type: "number",
+                    rules: [{
+                        required: true,
+                        message: "请输入业委会届别",
+                        trigger: "blur",
+                    },],
+                    value: 1
+                },
+
+                {
+                    width: 100,
+                    label: "成立时间",
+                    prop: "establishTime",
+                    type: "date",
+                    format: "yyyy-MM-dd",
+                    valueFormat: "yyyy-MM-dd",
+                },
+
+                {
+                    span: 24,
+                    label: "所在地址",
+                    prop: "location",
+                },
+
+                {
+                    width: 124,
+                    label: "任期开始时间",
+                    prop: "startTime",
+                    type: "date",
+                    format: "yyyy-MM-dd",
+                    valueFormat: "yyyy-MM-dd",
+                    rules: [{
+                        required: true,
+                        message: "请输入任期开始时间",
+                        trigger: "blur",
+                    },],
+                },
+
+                {
+                    width: 124,
+                    label: "任期结束时间",
+                    prop: "endTime",
+                    type: "date",
+                    format: "yyyy-MM-dd",
+                    valueFormat: "yyyy-MM-dd",
+                    rules: [{
+                        required: true,
+                        message: "请输入任期结束时间",
+                        trigger: "blur",
+                    },],
+                },
+
+                {
+                    width: 110,
+                    label: "图片",
+                    prop: "imageUrl",
+                    type: "upload",
+                    listType: "picture-img",
+                    action: "/api/blade-resource/oss/endpoint/put-file",
+                    propsHttp: {
+                        res: "data",
+                        name: 'name',
+                        url: "link",
                     },
+                    viewDisplay: false,
+                    span: 24,
+                },
 
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "任期开始时间",
-                        prop: "startTime",
-                        type: "date",
-                        format: "yyyy-MM-dd",
-                        valueFormat: "yyyy-MM-dd",
-                        rules: [{
-                            required: true,
-                            message: "请输入任期开始时间",
-                            trigger: "blur",
-                        },],
-                    },
+                {
+                    span: 12,
+                    label: "排序",
+                    prop: "sort",
+                    type: 'number',
+                    rules: [{
+                        required: true,
+                        message: "请输入排序",
+                        trigger: "blur",
+                    },],
+                    value: 1
+                },
 
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "任期结束时间",
-                        offset: 2,
-                        prop: "endTime",
-                        type: "date",
-                        format: "yyyy-MM-dd",
-                        valueFormat: "yyyy-MM-dd",
-                        rules: [{
-                            required: true,
-                            message: "请输入任期结束时间",
-                            trigger: "blur",
-                        },],
-                    },
+                // {
+                //     width: 100,
+                //     span: 12,
+                //     label: "状态",
+                //     slot: true,
+                //     prop: "status",
+                //     type: 'switch',
+                //     activeColor: "#13ce66",
+                //     inactiveColor: "#ccc",
+                //     dicData: [{
+                //         label: "关闭",
+                //         value: 1
+                //     },
+                //     {
+                //         label: "正常",
+                //         value: 0
+                //     },
+                //     ],
+                //     value: 0,
+                //     rules: [{
+                //         required: true,
+                //         message: "请输入排序",
+                //         trigger: "blur",
+                //     },],
+                // },
 
-                    {
-                        width: 110,
-                        label: "图片",
-                        prop: "imageUrl",
-                        type: "upload",
-                        labelWidth: 120,
-                        listType: "picture-img",
+                {
+                    span: 20,
+                    label: "简介",
+                    prop: "profile",
+                    component: "AvueUeditor",
+                    options: {
                         action: "/api/blade-resource/oss/endpoint/put-file",
-                        propsHttp: {
+                        props: {
                             res: "data",
-                            name: 'name',
                             url: "link",
                         },
-                        viewDisplay: false,
-                        span: 20,
                     },
-
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "排序",
-                        prop: "sort",
-                        type: 'number',
-                        rules: [{
-                            required: true,
-                            message: "请输入排序",
-                            trigger: "blur",
-                        },],
-                    },
-
-                    {
-                        span: 10,
-                        labelWidth: 120,
-                        label: "状态",
-                        offset: 2,
-                        prop: "status",
-                        type: 'switch',
-                        activeColor: "#13ce66",
-                        inactiveColor: "#ccc",
-                        dicData: [
-                            {
-                                label: "关闭",
-                                value: 1
-                            },
-                            {
-                                label: "正常",
-                                value: 0
-                            },
-                        ],
-                        rules: [{
-                            required: true,
-                            message: "请输入排序",
-                            trigger: "blur",
-                        },],
-                    },
-
-                    {
-                        span: 20,
-                        labelWidth: 120,
-                        label: "简介",
-                        prop: "profile",
-                        component: "AvueUeditor",
-                        options: {
-                            action: "/api/blade-resource/oss/endpoint/put-file",
-                            props: {
-                                res: "data",
-                                url: "link",
-                            },
-                        },
-                        hide: true,
-                        minRows: 6,
-                    },
+                    hide: true,
+                    minRows: 6,
+                },
 
                     // {
                     //   label: "简介",
                     //   prop: "profile",
-                    //   // labelWidth: 140,
                     //   viewDisplay: false,
                     //   type: "textarea"
                     // },
@@ -330,8 +354,41 @@
             })
             return ids.join(",")
         },
+        showStatus () {
+            return (data) => {
+                if (data == 0) {
+                    return {
+                        text: '正常',
+                        type: 'success'
+                    }
+                } else {
+                    return {
+                        text: '关闭',
+                        type: 'info'
+                    }
+                }
+            }
+        },
+
+        textDispose () {
+            return (row, flag, type) => {
+                if (row[flag] || row[type] == null) {
+                    return row[type]
+                } else {
+                    if (type == 'principalIdCard') {
+                        return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
+                    } else {
+                        return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
+                    }
+                }
+            }
+        }
     },
     methods: {
+        showStringDispose (row, type) {
+            row[type] = !row[type]
+        },
+
         manageMember (row) {
             this.memberFlag = true
             var that = this
@@ -486,6 +543,7 @@
                 const data = res.data.data
                 this.page.total = data.total
                 this.data = data.records.map(item => {
+                    this.$set(item, 'mobileflag', false)
                     if (item.imageUrl && item.imageUrl.length > 0) {
                         var urls = []
                         var names = item.imageUrl.split(",")

--
Gitblit v1.9.3