From 90e9409b7a3b732e8f3aef7a94ce579f6b7f414a Mon Sep 17 00:00:00 2001
From: baiying <15287105139@139.com>
Date: Thu, 18 Jul 2024 14:07:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E9=A1=B5=E9=9D=A2=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/views/iot/category/index.vue   |    4 +-
 vue/src/views/iot/group/index.vue      |    8 +-
 vue/src/views/iot/sip/index.vue        |  859 +++++++++--------
 vue/src/views/iot/sip/product-list.vue |  107 +--
 vue/src/views/iot/sip/sipidGen.vue     |  126 ++-
 vue/src/views/iot/template/index.vue   |    4 +-
 vue/src/views/system/user/index.vue    | 1203 +++++++++++-------------
 7 files changed, 1089 insertions(+), 1222 deletions(-)

diff --git a/vue/src/views/iot/category/index.vue b/vue/src/views/iot/category/index.vue
index 867bf307..cc87683f 100644
--- a/vue/src/views/iot/category/index.vue
+++ b/vue/src/views/iot/category/index.vue
@@ -34,10 +34,10 @@
                 </el-table-column>
                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                     <template slot-scope="scope">
-                        <el-button size="small" type="primary" style="padding:5px;" icon="el-icon-edit"
+                        <el-button size="small" type="text" style="padding:5px;" icon="el-icon-edit"
                             @click="handleUpdate(scope.row)" v-hasPermi="['iot:category:query']"
                             v-if="scope.row.isSys == '0' ? true : !isTenant">修改</el-button>
-                        <el-button size="small" type="danger" style="padding:5px;" icon="el-icon-delete"
+                        <el-button size="small" type="text" style="padding:5px;" icon="el-icon-delete"
                             @click="handleDelete(scope.row)" v-hasPermi="['iot:category:remove']"
                             v-if="scope.row.isSys == '0' ? true : !isTenant">删除</el-button>
                         <span style="font-size:10px;color:#999;" v-if="scope.row.isSys == '1' && isTenant">系统定义，不能修改</span>
diff --git a/vue/src/views/iot/group/index.vue b/vue/src/views/iot/group/index.vue
index b284e1a9..cee09c71 100644
--- a/vue/src/views/iot/group/index.vue
+++ b/vue/src/views/iot/group/index.vue
@@ -33,13 +33,13 @@
         <el-table-column label="备注" align="left" header-align="center" prop="remark" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320">
           <template slot-scope="scope">
-            <el-button v-hasPermi="['iot:device:query']" size="small" type="warning" style="padding: 5px"
+            <el-button v-hasPermi="['iot:device:query']" size="small" type="text" style="padding: 5px"
               icon="el-icon-search" @click="handleViewDevice(scope.row.groupId)">查看设备</el-button>
-            <el-button v-hasPermi="['iot:group:add']" size="small" type="success" style="padding: 5px" icon="el-icon-edit"
+            <el-button v-hasPermi="['iot:group:add']" size="small" type="text" style="padding: 5px" icon="el-icon-folder-add"
               @click="selectDevice(scope.row)">添加设备</el-button>
-            <el-button v-hasPermi="['iot:group:edit']" size="small" type="primary" style="padding: 5px"
+            <el-button v-hasPermi="['iot:group:edit']" size="small" type="text" style="padding: 5px"
               icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-            <el-button v-hasPermi="['iot:group:remove']" size="small" type="danger" style="padding: 5px"
+            <el-button v-hasPermi="['iot:group:remove']" size="small" type="text" style="padding: 5px"
               icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
diff --git a/vue/src/views/iot/sip/index.vue b/vue/src/views/iot/sip/index.vue
index 652bb879..115db1f3 100644
--- a/vue/src/views/iot/sip/index.vue
+++ b/vue/src/views/iot/sip/index.vue
@@ -1,68 +1,61 @@
 <template>
-  <div style="padding: 6px">
-    <el-card style="margin-bottom: 6px">
-      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="60px" style="margin-bottom: -20px">
-        <el-form-item label="设备ID" prop="deviceSipId">
-          <el-input v-model="queryParams.deviceSipId" placeholder="请输入设备编号" clearable size="small"
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="通道ID" prop="channelSipId">
-          <el-input v-model="queryParams.channelSipId" placeholder="请输入通道ID" clearable size="small"
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
-            <el-option v-for="dict in dict.type.sip_gen_status" :key="dict.value" :label="dict.label"
-              :value="dict.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-        <el-form-item style="float: right">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-            v-hasPermi="['iot:video:add']" :disabled="isGeneralUser">批量生成</el-button>
-          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || isGeneralUser"
-            @click="handleDelete" v-hasPermi="['iot:video:remove']">批量删除</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <div style="padding: 6px">
+        <el-card style="margin-bottom: 6px">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="60px" style="margin-bottom: -20px">
+                <el-form-item label="设备ID" prop="deviceSipId">
+                    <el-input v-model="queryParams.deviceSipId" placeholder="请输入设备编号" clearable size="small" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item label="通道ID" prop="channelSipId">
+                    <el-input v-model="queryParams.channelSipId" placeholder="请输入通道ID" clearable size="small" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item label="状态" prop="status">
+                    <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+                        <el-option v-for="dict in dict.type.sip_gen_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                </el-form-item>
+                <el-form-item style="float: right">
+                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:video:add']" :disabled="isGeneralUser">批量生成</el-button>
+                    <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || isGeneralUser" @click="handleDelete" v-hasPermi="['iot:video:remove']">批量删除</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
 
-    <el-card style="margin-bottom: 5px">
-      <el-table v-loading="loading" :data="sipidList" @selection-change="handleSelectionChange"
-        @cell-dblclick="celldblclick" size="">
-        <el-table-column type="selection" :selectable="selectable" width="55" align="center" />
-        <el-table-column label="设备编号" align="center" prop="deviceSipId">
-          <template slot-scope="scope">
-            <el-link :underline="false" type="primary" @click="handleViewDevice(scope.row.deviceSipId)">{{
-              scope.row.deviceSipId }}</el-link>
-          </template>
-        </el-table-column>
-        <el-table-column label="通道ID" align="center" prop="channelSipId" />
-        <el-table-column label="状态" align="center" prop="status" width="80">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.sip_gen_status" :value="scope.row.status" size="mini" />
-          </template>
-        </el-table-column>
-        <el-table-column label="所属产品" align="center" prop="productName" />
-        <el-table-column label="设备类型" align="center" prop="deviceType">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.video_type" :value="scope.row.deviceType" />
-          </template>
-        </el-table-column>
-        <el-table-column label="通道类型" align="center" prop="channelType">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.channel_type" :value="scope.row.channelType" />
-          </template>
-        </el-table-column>
-        <el-table-column label="行政区域" align="center" prop="citycode" />
-        <el-table-column label="注册时间" align="center" prop="registerTime" width="180">
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.registerTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-card style="margin-bottom: 5px">
+            <el-table v-loading="loading" :data="sipidList" @selection-change="handleSelectionChange" @cell-dblclick="celldblclick" size="">
+                <el-table-column type="selection" :selectable="selectable" width="55" align="center" />
+                <el-table-column label="设备编号" align="center" prop="deviceSipId">
+                    <template slot-scope="scope">
+                        <el-link :underline="false" type="primary" @click="handleViewDevice(scope.row.deviceSipId)">{{ scope.row.deviceSipId }}</el-link>
+                    </template>
+                </el-table-column>
+                <el-table-column label="通道ID" align="center" prop="channelSipId" />
+                <el-table-column label="状态" align="center" prop="status" width="80">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.sip_gen_status" :value="scope.row.status" size="mini" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="所属产品" align="center" prop="productName" />
+                <el-table-column label="设备类型" align="center" prop="deviceType">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.video_type" :value="scope.row.deviceType" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="通道类型" align="center" prop="channelType">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.channel_type" :value="scope.row.channelType" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="行政区域" align="center" prop="citycode" />
+                <el-table-column label="注册时间" align="center" prop="registerTime" width="180">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.registerTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot-scope="scope">
                     <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,'remark')" v-hasPermi="['iot:video:edit']">修改
                     </el-button>
@@ -70,57 +63,52 @@
                     </el-button>
                 </template>
             </el-table-column> -->
-      </el-table>
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="getList" />
-    </el-card>
+            </el-table>
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </el-card>
 
-    <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
-      <el-form :model="createForm" label-width="80px" ref="createForm">
-        <el-form-item label="行政区划">
-          <el-cascader :options="cityOptions" v-model="createForm.city" @change="changeProvince"
-            change-on-select></el-cascader>
-        </el-form-item>
-        <el-form-item label="设备类型" prop="deviceType">
-          <el-select v-model="createForm.deviceType" placeholder="请选择设备类型">
-            <el-option v-for="dict in dict.type.video_type" :key="dict.value" :label="dict.label"
-              :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="通道类型" prop="channelType">
-          <el-select v-model="createForm.channelType" placeholder="请选择设备类型">
-            <el-option v-for="dict in dict.type.channel_type" :key="dict.value" :label="dict.label"
-              :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="所属产品" prop="productName">
-          <el-input readonly v-model="createForm.productName" placeholder="请选择产品">
-            <el-button slot="append" @click="selectProduct()">选择</el-button>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="通道数量" prop="createNum">
-          <el-input-number controls-position="right" v-model="createForm.createNum" :max="10" placeholder="请输入生成通道数量"
-            type="number" style="width: 330px" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">生 成</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+        <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body :close-on-click-modal="false">
+            <el-form :model="createForm" :rules="createFormrules" label-width="80px" ref="createForm">
+                <el-form-item label="行政区划" prop="city">
+                    <el-cascader :options="cityOptions" v-model="createForm.city" @change="changeProvince" change-on-select style="width: 330px" :props="{ checkStrictly: false }"></el-cascader>
+                </el-form-item>
+                <el-form-item label="设备类型" prop="deviceType">
+                    <el-select v-model="createForm.deviceType" placeholder="请选择设备类型" style="width: 330px">
+                        <el-option v-for="dict in dict.type.video_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通道类型" prop="channelType">
+                    <el-select v-model="createForm.channelType" placeholder="请选择设备类型" style="width: 330px">
+                        <el-option v-for="dict in dict.type.channel_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="所属产品" prop="productName">
+                    <el-input readonly v-model="createForm.productName" placeholder="请选择产品">
+                        <el-button slot="append" @click="selectProduct()">选择</el-button>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="通道数量" prop="createNum">
+                    <el-input-number controls-position="right" v-model="createForm.createNum" :min="1" :max="10" placeholder="请输入生成通道数量" type="number" style="width: 330px" />
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">生 成</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
 
-    <!-- 选择产品 -->
-    <product-list ref="productList" @productEvent="getProductData($event)" />
-  </div>
+        <!-- 选择产品 -->
+        <product-list ref="productList" :productName="createForm.productName" @productEvent="getProductData($event)" />
+    </div>
 </template>
 
 <style>
 .createNum {
-  width: 300px;
+    width: 300px;
 }
 
 .createNum input {
-  width: 260px;
+    width: 260px;
 }
 </style>
 
@@ -131,344 +119,341 @@ import { listChannel, getChannel, delChannel, addChannel } from '@/api/iot/chann
 import productList from './product-list.vue';
 
 export default {
-  name: 'Sip',
-  dicts: ['sip_gen_status', 'video_type', 'channel_type'],
-  components: {
-    productList,
-  },
-  props: {
-    product: {
-      type: Object,
-      default: null,
+    name: 'Sip',
+    dicts: ['sip_gen_status', 'video_type', 'channel_type'],
+    components: {
+        productList,
     },
-  },
-  watch: {
-    // 获取到父组件传递的productId后，刷新列表
-    product: function (newVal, oldVal) {
-      this.productInfo = newVal;
-      if (this.productInfo && this.productInfo.productId != 0) {
-        this.queryParams.productId = this.productInfo.productId;
-        this.deviceParams.productId = this.productInfo.productId;
-        this.getList();
-      }
-    },
-  },
-  data() {
-    return {
-      // 是否普通用户
-      isGeneralUser: true,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非多个禁用
-      multiple: true,
-      // 总条数
-      total: 0,
-      // sipid表格数据
-      sipidList: [],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        deviceSipId: null,
-        deviceChannelId: null,
-        status: null,
-      },
-      // 表单参数
-      createForm: {
-        city: '',
-        deviceType: '',
-        channelType: '',
-        createNum: 1,
-        remark: '',
-        area: '',
-      },
-      form: {},
-      // 产品
-      productInfo: {},
-      // 城市
-      cityOptions: regionData,
-      city: '',
-      // 表单校验
-      rules: {
-        protocol: [
-          {
-            required: true,
-            message: '默认播放协议不能为空',
-            trigger: 'blur',
-          },
-        ],
-        ip: [
-          {
-            required: true,
-            message: '服务器ip不能为空',
-            trigger: 'blur',
-          },
-        ],
-        domain: [
-          {
-            required: true,
-            message: '服务器域名不能为空',
-            trigger: 'blur',
-          },
-        ],
-        secret: [
-          {
-            required: true,
-            message: '流媒体密钥不能为空',
-            trigger: 'blur',
-          },
-        ],
-        portHttp: [
-          {
-            required: true,
-            message: 'http端口不能为空',
-            trigger: 'blur',
-          },
-        ],
-        portHttps: [
-          {
-            required: true,
-            message: 'https端口不能为空',
-            trigger: 'blur',
-          },
-        ],
-        portRtmp: [
-          {
-            required: true,
-            message: 'rtmp端口不能为空',
-            trigger: 'blur',
-          },
-        ],
-        portRtsp: [
-          {
-            required: true,
-            message: 'rtsp端口不能为空',
-            trigger: 'blur',
-          },
-        ],
-        rtpPortRange: [
-          {
-            required: true,
-            message: 'rtp端口范围不能为空',
-            trigger: 'blur',
-          },
-        ],
-        delFlag: [
-          {
-            required: true,
-            message: '删除标志不能为空',
-            trigger: 'blur',
-          },
-        ],
-        createBy: [
-          {
-            required: true,
-            message: '创建者不能为空',
-            trigger: 'blur',
-          },
-        ],
-        createTime: [
-          {
-            required: true,
-            message: '创建时间不能为空',
-            trigger: 'blur',
-          },
-        ],
-      },
-    };
-  },
-  created() {
-    // 普通用户只能查看自己的通道
-    if (this.$store.state.user.roles.indexOf('general') === -1) {
-      this.isGeneralUser = false;
-    }
-    this.getList();
-  },
-  methods: {
-    /** 查看设备操作 */
-    handleViewDevice(serialNumber) {
-      this.$router.push({
-        path: '/iot/device',
-        query: {
-          t: Date.now(),
-          sn: serialNumber,
+    props: {
+        product: {
+            type: Object,
+            default: null,
         },
-      });
     },
-    /**选择产品 */
-    selectProduct() {
-      this.open = false;
-      this.$refs.productList.open = true;
-      this.$refs.productList.getList();
-    },
-    /**获取选中的产品 */
-    getProductData(product) {
-      this.open = true;
-      this.createForm.productId = product.productId;
-      this.createForm.productName = product.productName;
-      this.createForm.tenantId = product.tenantId;
-      this.createForm.tenantName = product.tenantName;
-    },
-    /** 行政区划改变 **/
-    changeProvince(data) {
-      if (data && data[0] != null && data[1] != null && data[2] != null) {
-        const str = CodeToText[data[0]] + '/' + CodeToText[data[1]] + '/' + CodeToText[data[2]];
-        this.createForm.citycode = str;
-      }
-    },
-    /**获取设备详情*/
-    getDeviceBySerialNumber(serialNumber) {
-      this.openDevice = true;
-      getDeviceBySerialNumber(serialNumber).then((response) => {
-        this.device = response.data;
-      });
-    },
-    /** 查询通道列表 */
-    getList() {
-      listChannel(this.queryParams).then((response) => {
-        this.sipidList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.createForm = {
-        id: null,
-        deviceSipId: null,
-        channelSipId: null,
-        status: 0,
-        registertime: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null,
-        createNum: 1,
-      };
-      this.resetForm('createForm');
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.loading = true;
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm');
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.multiple = !selection.length;
-    },
-    /** 批量新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = '生成设备通道';
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      console.log(row);
-      getChannel(id).then((response) => {
-        this.createForm = response.data;
-        this.open = true;
-        this.title = '修改产品分类';
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      if (this.createForm.createNum < 1) {
-        this.$modal.alertError('通道数量至少一个');
-        return;
-      }
-      if (!this.createForm.productId || this.createForm.productId == 0) {
-        this.$modal.alertError('请选择所属产品');
-        return;
-      }
-      this.createForm.deviceSipId = this.createForm.city[2] + '0000' + this.createForm.deviceType + '0';
-      this.createForm.channelSipId = this.createForm.city[2] + '0000' + this.createForm.channelType + '0';
-      if (this.createForm.deviceType !== '' && this.createForm.channelType !== '' && this.createForm.city.length === 3) {
-        console.log(this.createForm);
-        addChannel(this.createForm.createNum, this.createForm).then((response) => {
-          this.$modal.msgSuccess('新增成功');
-          this.open = false;
-          this.getList();
-        });
-      } else {
-        this.$message({
-          type: 'error',
-          message: '请选择地区，设备类型，通道类型！！',
-        });
-      }
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const sipIds = row.id || this.ids;
-      this.$modal
-        .confirm('是否确认删除ID为"' + sipIds + '"的数据项？')
-        .then(function () {
-          return delChannel(sipIds);
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess('删除成功');
-        })
-        .catch(() => { });
-    },
-
-    //禁用有绑定设备的复选框,status:1=未使用，2=已使用
-    selectable(row) {
-      if (row.status == 2 || this.isGeneralUser) {
-        return false;
-      }
-      return true;
-    },
-    //表格增加复制功能
-    celldblclick(row, column, cell, event) {
-      this.$copyText(row[column.property]).then(
-        (e) => {
-          this.onCopy();
+    watch: {
+        // 获取到父组件传递的productId后，刷新列表
+        product: function (newVal, oldVal) {
+            this.productInfo = newVal;
+            if (this.productInfo && this.productInfo.productId != 0) {
+                this.queryParams.productId = this.productInfo.productId;
+                this.deviceParams.productId = this.productInfo.productId;
+                this.getList();
+            }
         },
-        function (e) {
-          this.onError();
+    },
+    data() {
+        return {
+            // 是否普通用户
+            isGeneralUser: true,
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非多个禁用
+            multiple: true,
+            // 总条数
+            total: 0,
+            // sipid表格数据
+            sipidList: [],
+            // 弹出层标题
+            title: '',
+            // 是否显示弹出层
+            open: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                deviceSipId: null,
+                deviceChannelId: null,
+                status: null,
+            },
+            // 表单参数
+            createForm: {
+                city: '',
+                deviceType: '',
+                channelType: '',
+                createNum: 1,
+                remark: '',
+                area: '',
+            },
+            form: {},
+            // 产品
+            productInfo: {},
+            // 城市
+            cityOptions: regionData,
+            city: '',
+            // 表单校验
+            //createForm表单校验
+            createFormrules: {
+                city: [{ required: true, message: '行政区划不能为空', trigger: 'change' }],
+                deviceType: [{ required: true, message: '设备类型不饿能为空', trigger: 'change' }],
+                channelType: [{ required: true, message: '通道类型不能为空', trigger: 'change' }],
+                productName: [{ required: true, message: '产品类型不能为空', trigger: 'blur' }],
+                createNum: [{ required: true, message: '请输入生成通道数量', trigger: 'change' }],
+            },
+            rules: {
+                protocol: [
+                    {
+                        required: true,
+                        message: '默认播放协议不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                ip: [
+                    {
+                        required: true,
+                        message: '服务器ip不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                domain: [
+                    {
+                        required: true,
+                        message: '服务器域名不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                secret: [
+                    {
+                        required: true,
+                        message: '流媒体密钥不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                portHttp: [
+                    {
+                        required: true,
+                        message: 'http端口不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                portHttps: [
+                    {
+                        required: true,
+                        message: 'https端口不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                portRtmp: [
+                    {
+                        required: true,
+                        message: 'rtmp端口不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                portRtsp: [
+                    {
+                        required: true,
+                        message: 'rtsp端口不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                rtpPortRange: [
+                    {
+                        required: true,
+                        message: 'rtp端口范围不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                delFlag: [
+                    {
+                        required: true,
+                        message: '删除标志不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                createBy: [
+                    {
+                        required: true,
+                        message: '创建者不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                createTime: [
+                    {
+                        required: true,
+                        message: '创建时间不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        };
+    },
+    created() {
+        // 普通用户只能查看自己的通道
+        if (this.$store.state.user.roles.indexOf('general') === -1) {
+            this.isGeneralUser = false;
         }
-      );
+        this.getList();
     },
-    onCopy() {
-      this.$notify({
-        title: '成功',
-        message: '复制成功！',
-        type: 'success',
-        offset: 50,
-        duration: 2000,
-      });
+    methods: {
+        /** 查看设备操作 */
+        handleViewDevice(serialNumber) {
+            this.$router.push({
+                path: '/iot/device',
+                query: {
+                    t: Date.now(),
+                    sn: serialNumber,
+                },
+            });
+        },
+        /**选择产品 */
+        selectProduct() {
+            //this.open = false;
+            this.$refs.productList.open = true;
+            this.$refs.productList.getList();
+        },
+        /**获取选中的产品 */
+        getProductData(product) {
+            //this.open = true;
+            this.createForm.productId = product.productId;
+            this.createForm.productName = product.productName;
+            this.createForm.tenantId = product.tenantId;
+            this.createForm.tenantName = product.tenantName;
+            this.$refs.createForm.clearValidate('productName');
+            this.$forceUpdate(); // 强制更新视图
+        },
+        /** 行政区划改变 **/
+        changeProvince(data) {
+            if (data && data[0] != null && data[1] != null && data[2] != null) {
+                const str = CodeToText[data[0]] + '/' + CodeToText[data[1]] + '/' + CodeToText[data[2]];
+                this.createForm.citycode = str;
+            }
+        },
+        /**获取设备详情*/
+        getDeviceBySerialNumber(serialNumber) {
+            this.openDevice = true;
+            getDeviceBySerialNumber(serialNumber).then((response) => {
+                this.device = response.data;
+            });
+        },
+        /** 查询通道列表 */
+        getList() {
+            listChannel(this.queryParams).then((response) => {
+                this.sipidList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.createForm = {
+                id: null,
+                deviceSipId: null,
+                channelSipId: null,
+                status: 0,
+                registertime: null,
+                createBy: null,
+                createTime: null,
+                updateBy: null,
+                updateTime: null,
+                remark: null,
+                createNum: 1,
+            };
+            this.resetForm('createForm');
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.loading = true;
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm');
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.id);
+            this.multiple = !selection.length;
+        },
+        /** 批量新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = '生成设备通道';
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const id = row.id || this.ids;
+            console.log(row);
+            getChannel(id).then((response) => {
+                this.createForm = response.data;
+                this.open = true;
+                this.title = '修改产品分类';
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs['createForm'].validate((valid) => {
+                if (valid) {
+                    this.createForm.deviceSipId = this.createForm.city[2] + '0000' + this.createForm.deviceType + '0';
+                    this.createForm.channelSipId = this.createForm.city[2] + '0000' + this.createForm.channelType + '0';
+                    addChannel(this.createForm.createNum, this.createForm).then((response) => {
+                        this.$modal.msgSuccess('新增成功');
+                        this.open = false;
+                        this.getList();
+                    });
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const sipIds = row.id || this.ids;
+            this.$modal
+                .confirm('是否确认删除ID为"' + sipIds + '"的数据项？')
+                .then(function () {
+                    return delChannel(sipIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess('删除成功');
+                })
+                .catch(() => {});
+        },
+        //禁用有绑定设备的复选框,status:1=未使用，2=已使用
+        selectable(row) {
+            if (row.status == 2 || this.isGeneralUser) {
+                return false;
+            }
+            return true;
+        },
+        //表格增加复制功能
+        celldblclick(row, column, cell, event) {
+            this.$copyText(row[column.property]).then(
+                (e) => {
+                    this.onCopy();
+                },
+                function (e) {
+                    this.onError();
+                }
+            );
+        },
+        onCopy() {
+            this.$notify({
+                title: '成功',
+                message: '复制成功！',
+                type: 'success',
+                offset: 50,
+                duration: 2000,
+            });
+        },
+        onError() {
+            this.$notify({
+                title: '失败',
+                message: '复制失败！',
+                type: 'error',
+                offset: 50,
+                duration: 2000,
+            });
+        },
     },
-    onError() {
-      this.$notify({
-        title: '失败',
-        message: '复制失败！',
-        type: 'error',
-        offset: 50,
-        duration: 2000,
-      });
-    },
-  },
 };
 </script>
diff --git a/vue/src/views/iot/sip/product-list.vue b/vue/src/views/iot/sip/product-list.vue
index 27a3eb94..3bf298d5 100644
--- a/vue/src/views/iot/sip/product-list.vue
+++ b/vue/src/views/iot/sip/product-list.vue
@@ -1,60 +1,58 @@
 <template>
-<el-dialog title="选择产品" :visible.sync="open" width="600px" append-to-body>
-    <div style="margin-top:-55px;">
-        <el-divider style="margin-top:-30px;"></el-divider>
-        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-            <el-form-item label="产品名称" prop="productName">
-                <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            </el-form-item>
-        </el-form>
+    <el-dialog title="选择产品" :visible.sync="open" width="600px" append-to-body>
+        <div style="margin-top: -55px">
+            <el-divider style="margin-top: -30px"></el-divider>
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+                <el-form-item label="产品名称" prop="productName">
+                    <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable size="small" @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                </el-form-item>
+            </el-form>
 
-        <el-table v-loading="loading" ref="singleTable" :data="productList" @row-click="rowClick" highlight-current-row size="mini">
-            <el-table-column label="选择" width="50" align="center">
-                <template slot-scope="scope">
-                    <input type="radio" :checked="scope.row.isSelect" name="product" />
-                </template>
-            </el-table-column>
-            <el-table-column label="产品名称" align="center" prop="productName" />
-            <el-table-column label="分类名称" align="center" prop="categoryName" />
-            <el-table-column label="租户名称" align="center" prop="tenantName" />
-            <el-table-column label="联网方式" align="center" prop="networkMethod">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.iot_network_method" :value="scope.row.networkMethod" />
-                </template>
-            </el-table-column>
-            <el-table-column label="创建时间" align="center" prop="createTime" width="100">
-                <template slot-scope="scope">
-                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-                </template>
-            </el-table-column>
-        </el-table>
+            <el-table v-loading="loading" ref="singleTable" :data="productList" @row-click="rowClick" highlight-current-row size="mini">
+                <el-table-column label="选择" width="50" align="center">
+                    <template slot-scope="scope">
+                        <input type="radio" :checked="scope.row.isSelect" name="product" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="产品名称" align="center" prop="productName" />
+                <el-table-column label="分类名称" align="center" prop="categoryName" />
+                <el-table-column label="租户名称" align="center" prop="tenantName" />
+                <el-table-column label="联网方式" align="center" prop="networkMethod">
+                    <template slot-scope="scope">
+                        <dict-tag :options="dict.type.iot_network_method" :value="scope.row.networkMethod" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+                    <template slot-scope="scope">
+                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
 
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-    </div>
-    <div slot="footer" class="dialog-footer">
-        <el-button @click="confirmSelectProduct" type="primary">确定</el-button>
-        <el-button @click="closeDialog" type="info">关 闭</el-button>
-    </div>
-</el-dialog>
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="confirmSelectProduct" type="primary">确定</el-button>
+            <el-button @click="closeDialog" type="info">关 闭</el-button>
+        </div>
+    </el-dialog>
 </template>
 
 <script>
-import {
-    listProduct,
-} from "@/api/iot/product";
+import { listProduct } from '@/api/iot/product';
 
 export default {
-    name: "SipProductList",
+    name: 'SipProductList',
     dicts: ['iot_vertificate_method', 'iot_network_method'],
     props: {
         productId: {
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     data() {
         return {
@@ -67,7 +65,7 @@ export default {
             // 产品列表
             productList: [],
             // 选中的产品
-            product: {},
+            product: null,
             // 查询参数
             queryParams: {
                 pageNum: 1,
@@ -84,14 +82,12 @@ export default {
             },
         };
     },
-    created() {
-
-    },
+    created() {},
     methods: {
         /** 查询产品列表 */
         getList() {
             this.loading = true;
-            listProduct(this.queryParams).then(response => {
+            listProduct(this.queryParams).then((response) => {
                 //产品列表初始化isSelect值，用于单选
                 for (let i = 0; i < response.rows.length; i++) {
                     response.rows[i].isSelect = false;
@@ -111,7 +107,7 @@ export default {
         },
         /** 重置按钮操作 */
         resetQuery() {
-            this.resetForm("queryForm");
+            this.resetForm('queryForm');
             this.handleQuery();
         },
         /** 单选数据 */
@@ -133,13 +129,18 @@ export default {
         },
         /**确定选择产品，产品传递给父组件 */
         confirmSelectProduct() {
+            if (this.product == null) {
+                this.$message.error('请选择产品');
+                return;
+            }
             this.$emit('productEvent', this.product);
             this.open = false;
+            this.product = null;
         },
         /**关闭对话框 */
         closeDialog() {
             this.open = false;
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/vue/src/views/iot/sip/sipidGen.vue b/vue/src/views/iot/sip/sipidGen.vue
index 65e9d756..bb894fee 100644
--- a/vue/src/views/iot/sip/sipidGen.vue
+++ b/vue/src/views/iot/sip/sipidGen.vue
@@ -1,58 +1,54 @@
 <template>
-<el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
-    <el-form ref="createForm" :model="createForm" label-width="100px">
-        <el-form-item label="行政区划">
-            <el-cascader :options="cityOptions" v-model="createForm.city" @change="changeProvince" change-on-select>
-            </el-cascader>
-        </el-form-item>
-        <el-form-item label="设备类型" prop="deviceType">
-            <el-select v-model="createForm.deviceType" placeholder="请选择设备类型">
-                <el-option v-for="dict in dict.type.video_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item label="通道类型" prop="channelType">
-            <el-select v-model="createForm.channelType" placeholder="请选择设备类型">
-                <el-option v-for="dict in dict.type.channel_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item label="通道数量" prop="createNum">
-            <el-input-number controls-position="right" v-model="createForm.createNum" placeholder="请输入生成通道数量" type="number" style="width:220px;" />
-        </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">生 成</el-button>
-        <el-button @click="closeDialog">取 消</el-button>
-    </div>
-</el-dialog>
+    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body :close-on-click-modal="false">
+        <el-form ref="createForm" :model="createForm" label-width="100px" :rules="rules">
+            <el-form-item label="行政区划" prop="city">
+                <el-cascader :options="cityOptions" v-model="createForm.city" @change="changeProvince" change-on-select :props="{ checkStrictly: false }"></el-cascader>
+            </el-form-item>
+            <el-form-item label="设备类型" prop="deviceType">
+                <el-select v-model="createForm.deviceType" placeholder="请选择设备类型">
+                    <el-option v-for="dict in dict.type.video_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="通道类型" prop="channelType">
+                <el-select v-model="createForm.channelType" placeholder="请选择设备类型">
+                    <el-option v-for="dict in dict.type.channel_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="通道数量" prop="createNum">
+                <el-input-number controls-position="right" :min="1" :max="10" v-model="createForm.createNum" placeholder="请输入生成通道数量" type="number" style="width: 220px" />
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">生 成</el-button>
+            <el-button @click="closeDialog">取 消</el-button>
+        </div>
+    </el-dialog>
 </template>
 
 <script>
-import {
-    regionData,
-    CodeToText
-} from 'element-china-area-data'
+import { regionData, CodeToText } from 'element-china-area-data';
 
-import {addChannel} from "@/api/iot/channel";
+import { addChannel } from '@/api/iot/channel';
 
 export default {
-    name: "SipidDialog",
+    name: 'SipidDialog',
     dicts: ['video_type', 'channel_type'],
     props: {
         product: {
             type: Object,
-            default: null
-        }
+            default: null,
+        },
     },
     data() {
         return {
             // 遮罩层
             loading: true,
-            title: "生成设备编号和通道",
+            title: '生成设备编号和通道',
             // 总条数
             total: 0,
             // 打开选择产品对话框
             open: false,
-            devsipid: "",
+            devsipid: '',
             createForm: {
                 city: '',
                 deviceType: '',
@@ -63,11 +59,17 @@ export default {
             cityOptions: regionData,
             city: '',
             cityCode: '',
+
+            // 表单校验
+            rules: {
+                city: [{ required: true, message: '行政区划不能为空', trigger: 'change' }],
+                deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
+                channelType: [{ required: true, message: '通道类型不能为空', trigger: 'change' }],
+                createNum: [{ required: true, message: '请输入生成通道数量', trigger: 'change' }],
+            },
         };
     },
-    created() {
-
-    },
+    created() {},
     methods: {
         /** 行政区划改变 **/
         changeProvince(data) {
@@ -78,29 +80,21 @@ export default {
         },
         /** 提交按钮 */
         submitForm() {
-            if (this.createForm.createNum < 1) {
-                this.$modal.alertError("通道数量至少一个");
-                return;
-            }
-            this.createForm.productId = this.product.productId;
-            this.createForm.productName = this.product.productName;
-            this.createForm.tenantId = this.product.tenantId;
-            this.createForm.tenantName = this.product.tenantName;
-            this.createForm.deviceSipId = this.createForm.city[2] + "0000" + this.createForm.deviceType + "0"
-            this.createForm.channelSipId = this.createForm.city[2] + "0000" + this.createForm.channelType + "0"
-            if (this.createForm.deviceType !== "" && this.createForm.channelType !== "" && this.createForm.city.length === 3) {
-              addChannel(this.createForm.createNum, this.createForm).then(response => {
-                    this.$modal.msgSuccess("已生成设备编号和通道");
-                    this.devsipid = response.data;
-                    this.confirmSelectProduct();
-                });
-            } else {
-                this.$message({
-                    type: 'error',
-                    message: '请选择地区，设备类型，通道类型！！'
-                });
-            }
-
+            this.$refs.createForm.validate((valid) => {
+                if (valid) {
+                    this.createForm.productId = this.product.productId;
+                    this.createForm.productName = this.product.productName;
+                    this.createForm.tenantId = this.product.tenantId;
+                    this.createForm.tenantName = this.product.tenantName;
+                    this.createForm.deviceSipId = this.createForm.city[2] + '0000' + this.createForm.deviceType + '0';
+                    this.createForm.channelSipId = this.createForm.city[2] + '0000' + this.createForm.channelType + '0';
+                    addChannel(this.createForm.createNum, this.createForm).then((response) => {
+                        this.$modal.msgSuccess('已生成设备编号和通道');
+                        this.devsipid = response.data;
+                        this.confirmSelectProduct();
+                    });
+                }
+            });
         },
         confirmSelectProduct() {
             this.open = false;
@@ -109,11 +103,9 @@ export default {
         /**关闭对话框 */
         closeDialog() {
             this.open = false;
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/vue/src/views/iot/template/index.vue b/vue/src/views/iot/template/index.vue
index 8185e6c0..0b4e3485 100644
--- a/vue/src/views/iot/template/index.vue
+++ b/vue/src/views/iot/template/index.vue
@@ -71,12 +71,12 @@
         <el-table-column label="排序" align="center" prop="modelOrder" width="80" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
           <template slot-scope="scope">
-            <el-button size="small" type="primary" style="padding: 5px" icon="el-icon-edit"
+            <el-button size="small" type="text" style="padding: 5px" icon="el-icon-edit"
               @click="handleUpdate(scope.row)" v-hasPermi="['iot:template:query']"
               v-if="scope.row.isSys == '0' ? true : !isTenant">
               修改
             </el-button>
-            <el-button size="small" type="danger" style="padding: 5px" icon="el-icon-delete"
+            <el-button size="small" type="text" style="padding: 5px" icon="el-icon-delete"
               @click="handleDelete(scope.row)" v-hasPermi="['iot:template:remove']"
               v-if="scope.row.isSys == '0' ? true : !isTenant">
               删除
diff --git a/vue/src/views/system/user/index.vue b/vue/src/views/system/user/index.vue
index ae87fe49..314a1b4e 100644
--- a/vue/src/views/system/user/index.vue
+++ b/vue/src/views/system/user/index.vue
@@ -1,670 +1,559 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <!--部门数据-->
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入部门名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
-        </div>
-        <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-          />
-        </div>
-      </el-col>
-      <!--用户数据-->
-      <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="userName">
-            <el-input
-              v-model="queryParams.userName"
-              placeholder="请输入用户名称"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-              v-model="queryParams.phonenumber"
-              placeholder="请输入手机号码"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select
-              v-model="queryParams.status"
-              placeholder="用户状态"
-              clearable
-              style="width: 240px"
+    <div class="app-container">
+        <el-row :gutter="20">
+            <!--部门数据-->
+            <el-col :span="4" :xs="24">
+                <div class="head-container">
+                    <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+                </div>
+                <div class="head-container">
+                    <el-tree
+                        :data="deptOptions"
+                        :props="defaultProps"
+                        :expand-on-click-node="false"
+                        :filter-node-method="filterNode"
+                        ref="tree"
+                        node-key="id"
+                        default-expand-all
+                        highlight-current
+                        @node-click="handleNodeClick"
+                    />
+                </div>
+            </el-col>
+            <!--用户数据-->
+            <el-col :span="20" :xs="24">
+                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+                    <el-form-item label="用户名称" prop="userName">
+                        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                    </el-form-item>
+                    <el-form-item label="手机号码" prop="phonenumber">
+                        <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+                    </el-form-item>
+                    <el-form-item label="状态" prop="status">
+                        <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+                            <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="创建时间">
+                        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                </el-form>
+
+                <el-row :gutter="10" class="mb8">
+                    <el-col :span="1.5">
+                        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
+                    </el-col>
+                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+                </el-row>
+
+                <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+                    <el-table-column type="selection" width="50" align="center" />
+                    <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+                    <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+                    <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+                    <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+                    <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+                    <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+                        <template slot-scope="scope">
+                            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+                        <template slot-scope="scope">
+                            <span>{{ parseTime(scope.row.createTime) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+                        <template slot-scope="scope" v-if="scope.row.userId !== 1">
+                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
+                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
+                            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
+                                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
+                                    <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </el-dropdown>
+                        </template>
+                    </el-table-column>
+                </el-table>
+
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+            </el-col>
+        </el-row>
+
+        <!-- 添加或修改用户配置对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body :close-on-click-modal="false">
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="用户昵称" prop="nickName">
+                            <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="归属部门" prop="deptId">
+                            <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="手机号码" prop="phonenumber">
+                            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="邮箱" prop="email">
+                            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+                            <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+                            <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="用户性别">
+                            <el-select v-model="form.sex" placeholder="请选择性别">
+                                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="状态">
+                            <el-radio-group v-model="form.status">
+                                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="岗位">
+                            <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
+                                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="角色">
+                            <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
+                                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="备注">
+                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 用户导入对话框 -->
+        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+            <el-upload
+                ref="upload"
+                :limit="1"
+                accept=".xlsx, .xls"
+                :headers="upload.headers"
+                :action="upload.url + '?updateSupport=' + upload.updateSupport"
+                :disabled="upload.isUploading"
+                :on-progress="handleFileUploadProgress"
+                :on-success="handleFileSuccess"
+                :auto-upload="false"
+                drag
             >
-              <el-option
-                v-for="dict in dict.type.sys_normal_disable"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="dateRange"
-              style="width: 240px"
-              value-format="yyyy-MM-dd"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:add']"
-            >新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="success"
-              plain
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:user:edit']"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="danger"
-              plain
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-              v-hasPermi="['system:user:remove']"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="info"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >导入</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
-            >导出</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-          <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
-          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.status"
-                active-value="0"
-                inactive-value="1"
-                @change="handleStatusChange(scope.row)"
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope" v-if="scope.row.userId !== 1">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-              >修改</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-              >删除</el-button>
-              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
-                  <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
-      </el-col>
-    </el-row>
-
-    <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择性别">
-                <el-option
-                  v-for="dict in dict.type.sys_user_sex"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
-                <el-option
-                  v-for="item in postOptions"
-                  :key="item.postId"
-                  :label="item.postName"
-                  :value="item.postId"
-                  :disabled="item.status == 1"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.roleId"
-                  :label="item.roleName"
-                  :value="item.roleId"
-                  :disabled="item.status == 1"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
-          </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
-        </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">
+                    将文件拖到此处，或
+                    <em>点击上传</em>
+                </div>
+                <div class="el-upload__tip text-center" slot="tip">
+                    <div class="el-upload__tip" slot="tip">
+                        <el-checkbox v-model="upload.updateSupport" />
+                        是否更新已经存在的用户数据
+                    </div>
+                    <span>仅允许导入xls、xlsx格式文件。</span>
+                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+                </div>
+            </el-upload>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitFileForm">确 定</el-button>
+                <el-button @click="upload.open = false">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
-import { getToken } from "@/utils/auth";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from '@/api/system/user';
+import { getToken } from '@/utils/auth';
+import Treeselect from '@riophae/vue-treeselect';
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 
 export default {
-  name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
-  components: { Treeselect },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 用户表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      // 部门树选项
-      deptOptions: undefined,
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      deptName: undefined,
-      // 默认密码
-      initPassword: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        userName: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-      columns: [
-        { key: 0, label: `用户编号`, visible: true },
-        { key: 1, label: `用户名称`, visible: true },
-        { key: 2, label: `用户昵称`, visible: true },
-        { key: 3, label: `部门`, visible: true },
-        { key: 4, label: `手机号码`, visible: true },
-        { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `创建时间`, visible: true }
-      ],
-      // 表单校验
-      rules: {
-        userName: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        nickName: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    };
-  },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
-  created() {
-    this.getList();
-    this.getDeptTree();
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg;
-    });
-  },
-  methods: {
-    /** 查询用户列表 */
-    getList() {
-      this.loading = true;
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
-      );
+    name: 'User',
+    dicts: ['sys_normal_disable', 'sys_user_sex'],
+    components: { Treeselect },
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 用户表格数据
+            userList: null,
+            // 弹出层标题
+            title: '',
+            // 部门树选项
+            deptOptions: undefined,
+            // 是否显示弹出层
+            open: false,
+            // 部门名称
+            deptName: undefined,
+            // 默认密码
+            initPassword: undefined,
+            // 日期范围
+            dateRange: [],
+            // 岗位选项
+            postOptions: [],
+            // 角色选项
+            roleOptions: [],
+            // 表单参数
+            form: {},
+            defaultProps: {
+                children: 'children',
+                label: 'label',
+            },
+            // 用户导入参数
+            upload: {
+                // 是否显示弹出层（用户导入）
+                open: false,
+                // 弹出层标题（用户导入）
+                title: '',
+                // 是否禁用上传
+                isUploading: false,
+                // 是否更新已经存在的用户数据
+                updateSupport: 0,
+                // 设置上传的请求头部
+                headers: { Authorization: 'Bearer ' + getToken() },
+                // 上传的地址
+                url: process.env.VUE_APP_BASE_API + '/system/user/importData',
+            },
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                userName: undefined,
+                phonenumber: undefined,
+                status: undefined,
+                deptId: undefined,
+            },
+            // 列信息
+            columns: [
+                { key: 0, label: `用户编号`, visible: true },
+                { key: 1, label: `用户名称`, visible: true },
+                { key: 2, label: `用户昵称`, visible: true },
+                { key: 3, label: `部门`, visible: true },
+                { key: 4, label: `手机号码`, visible: true },
+                { key: 5, label: `状态`, visible: true },
+                { key: 6, label: `创建时间`, visible: true },
+            ],
+            // 表单校验
+            rules: {
+                userName: [
+                    { required: true, message: '用户名称不能为空', trigger: 'blur' },
+                    { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' },
+                ],
+                nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+                password: [
+                    { required: true, message: '用户密码不能为空', trigger: 'blur' },
+                    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+                ],
+                email: [
+                    {
+                        type: 'email',
+                        message: '请输入正确的邮箱地址',
+                        trigger: ['blur', 'change'],
+                    },
+                ],
+                phonenumber: [
+                    {
+                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+                        message: '请输入正确的手机号码',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        };
     },
-    /** 查询部门下拉树结构 */
-    getDeptTree() {
-      deptTreeSelect().then(response => {
-        this.deptOptions = response.data;
-      });
+    watch: {
+        // 根据名称筛选部门树
+        deptName(val) {
+            this.$refs.tree.filter(val);
+        },
     },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.handleQuery();
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
-        return changeUserStatus(row.userId, row.status);
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        userId: undefined,
-        deptId: undefined,
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.queryParams.deptId = undefined;
-      this.$refs.tree.setCurrentKey(null);
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row);
-          break;
-        case "handleAuthRole":
-          this.handleAuthRole(row);
-          break;
-        default:
-          break;
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      getUser().then(response => {
-        this.postOptions = response.posts;
-        this.roleOptions = response.roles;
-        this.open = true;
-        this.title = "添加用户";
-        this.form.password = this.initPassword;
-      });
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const userId = row.userId || this.ids;
-      getUser(userId).then(response => {
-        this.form = response.data;
-        this.postOptions = response.posts;
-        this.roleOptions = response.roles;
-        this.$set(this.form, "postIds", response.postIds);
-        this.$set(this.form, "roleIds", response.roleIds);
-        this.open = true;
-        this.title = "修改用户";
-        this.form.password = "";
-      });
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
-      }).then(({ value }) => {
-          resetUserPwd(row.userId, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value);
-          });
-        }).catch(() => {});
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function(row) {
-      const userId = row.userId;
-      this.$router.push("/system/user-auth/role/" + userId);
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.userId != undefined) {
-            updateUser(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addUser(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids;
-      this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function() {
-        return delUser(userIds);
-      }).then(() => {
+    created() {
         this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.getDeptTree();
+        this.getConfigKey('sys.user.initPassword').then((response) => {
+            this.initPassword = response.msg;
+        });
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
+    methods: {
+        /** 查询用户列表 */
+        getList() {
+            this.loading = true;
+            listUser(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+                this.userList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /** 查询部门下拉树结构 */
+        getDeptTree() {
+            deptTreeSelect().then((response) => {
+                this.deptOptions = response.data;
+            });
+        },
+        // 筛选节点
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        // 节点单击事件
+        handleNodeClick(data) {
+            this.queryParams.deptId = data.id;
+            this.handleQuery();
+        },
+        // 用户状态修改
+        handleStatusChange(row) {
+            let text = row.status === '0' ? '启用' : '停用';
+            this.$modal
+                .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
+                .then(function () {
+                    return changeUserStatus(row.userId, row.status);
+                })
+                .then(() => {
+                    this.$modal.msgSuccess(text + '成功');
+                })
+                .catch(function () {
+                    row.status = row.status === '0' ? '1' : '0';
+                });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                userId: undefined,
+                deptId: undefined,
+                userName: undefined,
+                nickName: undefined,
+                password: undefined,
+                phonenumber: undefined,
+                email: undefined,
+                sex: undefined,
+                status: '0',
+                remark: undefined,
+                postIds: [],
+                roleIds: [],
+            };
+            this.resetForm('form');
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.dateRange = [];
+            this.resetForm('queryForm');
+            this.queryParams.deptId = undefined;
+            this.$refs.tree.setCurrentKey(null);
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.userId);
+            this.single = selection.length != 1;
+            this.multiple = !selection.length;
+        },
+        // 更多操作触发
+        handleCommand(command, row) {
+            switch (command) {
+                case 'handleResetPwd':
+                    this.handleResetPwd(row);
+                    break;
+                case 'handleAuthRole':
+                    this.handleAuthRole(row);
+                    break;
+                default:
+                    break;
+            }
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            getUser().then((response) => {
+                this.postOptions = response.posts;
+                this.roleOptions = response.roles;
+                this.open = true;
+                this.title = '添加用户';
+                this.form.password = this.initPassword;
+            });
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const userId = row.userId || this.ids;
+            getUser(userId).then((response) => {
+                this.form = response.data;
+                this.postOptions = response.posts;
+                this.roleOptions = response.roles;
+                this.$set(this.form, 'postIds', response.postIds);
+                this.$set(this.form, 'roleIds', response.roleIds);
+                this.open = true;
+                this.title = '修改用户';
+                this.form.password = '';
+            });
+        },
+        /** 重置密码按钮操作 */
+        handleResetPwd(row) {
+            this.$prompt('请输入"' + row.userName + '"的新密码', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                closeOnClickModal: false,
+                inputPattern: /^.{5,20}$/,
+                inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
+            })
+                .then(({ value }) => {
+                    resetUserPwd(row.userId, value).then((response) => {
+                        this.$modal.msgSuccess('修改成功，新密码是：' + value);
+                    });
+                })
+                .catch(() => {});
+        },
+        /** 分配角色操作 */
+        handleAuthRole: function (row) {
+            const userId = row.userId;
+            this.$router.push('/system/user-auth/role/' + userId);
+        },
+        /** 提交按钮 */
+        submitForm: function () {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    if (this.form.userId != undefined) {
+                        updateUser(this.form).then((response) => {
+                            this.$modal.msgSuccess('修改成功');
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addUser(this.form).then((response) => {
+                            this.$modal.msgSuccess('新增成功');
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const userIds = row.userId || this.ids;
+            this.$modal
+                .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+                .then(function () {
+                    return delUser(userIds);
+                })
+                .then(() => {
+                    this.getList();
+                    this.$modal.msgSuccess('删除成功');
+                })
+                .catch(() => {});
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download(
+                'system/user/export',
+                {
+                    ...this.queryParams,
+                },
+                `user_${new Date().getTime()}.xlsx`
+            );
+        },
+        /** 导入按钮操作 */
+        handleImport() {
+            this.upload.title = '用户导入';
+            this.upload.open = true;
+        },
+        /** 下载模板操作 */
+        importTemplate() {
+            this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
+        },
+        // 文件上传中处理
+        handleFileUploadProgress(event, file, fileList) {
+            this.upload.isUploading = true;
+        },
+        // 文件上传成功处理
+        handleFileSuccess(response, file, fileList) {
+            this.upload.open = false;
+            this.upload.isUploading = false;
+            this.$refs.upload.clearFiles();
+            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true });
+            this.getList();
+        },
+        // 提交上传文件
+        submitFileForm() {
+            this.$refs.upload.submit();
+        },
     },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "用户导入";
-      this.upload.open = true;
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true;
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList();
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit();
-    }
-  }
 };
-</script>
\ No newline at end of file
+</script>