修改用户单位管理模块

master/src/main/resources/mybatis/invoice/TInvoiceUserUnitMapper.xml

@@ -3,7 +3,7 @@
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.ruoyi.project.invoice.mapper.TInvoiceUserUnitMapper">
-    
+
     <resultMap type="TInvoiceUserUnit" id="TInvoiceUserUnitResult">
         <result property="id"    column="id"    />
         <result property="userUnit"    column="user_unit"    />
@@ -25,7 +25,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 
     <select id="selectTInvoiceUserUnitList" parameterType="TInvoiceUserUnit" resultMap="TInvoiceUserUnitResult">
         <include refid="selectTInvoiceUserUnitVo"/>
-        <where>  
+        <where>
             <if test="userUnit != null  and userUnit != ''"> and user_unit = #{userUnit}</if>
             <if test="userIds != null  and userIds != ''"> and user_ids = #{userIds}</if>
             <if test="createrCode != null  and createrCode != ''"> and creater_code = #{createrCode}</if>
@@ -38,13 +38,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         </where>
         <!-- 数据范围过滤 -->
         ${params.dataScope}
+        order by user_unit
     </select>
-    
+
     <select id="selectTInvoiceUserUnitById" parameterType="Long" resultMap="TInvoiceUserUnitResult">
         <include refid="selectTInvoiceUserUnitVo"/>
         where id = #{id}
     </select>
-        
+
     <insert id="insertTInvoiceUserUnit" parameterType="TInvoiceUserUnit">
         <selectKey keyProperty="id" resultType="long" order="BEFORE">
             SELECT seq_t_invoice_user_unit.NEXTVAL as id FROM DUAL
@@ -102,5 +103,5 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             #{id}
         </foreach>
     </update>
-    
-</mapper>
+
+</mapper>

ui/src/views/invoice/unit/index.vue

@@ -33,7 +33,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['invoice:unit:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -43,7 +44,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['invoice:unit:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -53,17 +55,19 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['invoice:unit:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          icon="el-icon-upload2"
+          size="mini"
+          @click="handleImport"
+          v-hasPermi="['invoice:unit:edit']"
+        >导入
+        </el-button>
       </el-col>
-        <el-col :span="1.5">
-            <el-button
-                    type="info"
-                    icon="el-icon-upload2"
-                    size="mini"
-                    @click="handleImport"
-                    v-hasPermi="['invoice:unit:edit']"
-            >导入</el-button>
-        </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -71,15 +75,18 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['invoice:unit:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
-	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="unitList" @selection-change="handleSelectionChange" :height="clientHeight" border>
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="单位" align="center" prop="userUnit" :show-overflow-tooltip="true"/>
-      <el-table-column label="用户" align="center" prop="userIds" :show-overflow-tooltip="true"/>
+    <el-table v-loading="loading" :span-method="mergeMethod" :data="unitList" @selection-change="handleSelectionChange" :height="clientHeight"
+              border >
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="单位" align="center" prop="userUnit" :show-overflow-tooltip="true"
+                       :formatter="unitFormat"/>
+      <el-table-column label="用户" align="center" prop="nickName" :show-overflow-tooltip="true"/>
       <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
       <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -89,14 +96,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['invoice:unit:edit']"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['invoice:unit:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -113,13 +122,27 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="单位" prop="userUnit">
-          <el-input v-model="form.userUnit" placeholder="请输入单位" />
+          <el-select v-model="form.userUnit" :placeholder="$t('请选择') + $t('用户单位')">
+            <el-option
+              v-for="dict in unitOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="用户" prop="userIds">
-          <el-input v-model="form.userIds" placeholder="请输入用户" />
+          <el-select v-model="form.userIds" filterable :placeholder="$t('请选择') + $t('关联用户')">
+            <el-option
+              v-for="dict in userOptions"
+              :key="dict.userId"
+              :label="dict.nickName"
+              :value="dict.userId">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remarks">
-          <el-input v-model="form.remarks" placeholder="请输入备注" />
+          <el-input v-model="form.remarks" placeholder="请输入备注"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -127,51 +150,55 @@
         <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" slot="tip">
-                  <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-                  <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
-              </div>
-              <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</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>
+    <!-- 用户导入对话框 -->
+    <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" slot="tip">
+          <el-checkbox v-model="upload.updateSupport"/>
+          是否更新已经存在的用户数据
+          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
+        </div>
+        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</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 { listUnit, getUnit, delUnit, addUnit, updateUnit, exportUnit, importTemplate} from "@/api/invoice/unit";
-import { treeselect } from "@/api/system/dept";
-import { getToken } from "@/utils/auth";
+import {listUnit, getUnit, delUnit, addUnit, updateUnit, exportUnit, importTemplate} from "@/api/invoice/unit";
+import {treeselect} from "@/api/system/dept";
+import {getToken} from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {listPostUser} from "@/api/system/user";
 
 export default {
   name: "Unit",
-  components: { Treeselect },
+  components: {Treeselect},
   data() {
     return {
+      unitOptions: [],
+      userOptions: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -190,24 +217,24 @@ export default {
       title: "",
       // 部门树选项
       deptOptions: undefined,
-      clientHeight:300,
+      clientHeight: 300,
       // 是否显示弹出层
       open: false,
-        // 用户导入参数
-        upload: {
-            // 是否显示弹出层（用户导入）
-            open: false,
-            // 弹出层标题（用户导入）
-            title: "",
-            // 是否禁用上传
-            isUploading: false,
-            // 是否更新已经存在的用户数据
-            updateSupport: 0,
-            // 设置上传的请求头部
-            headers: { Authorization: "Bearer " + getToken() },
-            // 上传的地址
-            url: process.env.VUE_APP_BASE_API + "/invoice/unit/importData"
-        },
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: {Authorization: "Bearer " + getToken()},
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/invoice/unit/importData"
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -224,40 +251,62 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {}
     };
   },
   watch: {
-        // 根据名称筛选部门树
-        deptName(val) {
-            this.$refs.tree.filter(val);
-        }
-   },
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
   created() {
-      //设置表格高度对应屏幕高度
-      this.$nextTick(() => {
-          this.clientHeight = document.body.clientHeight -250
-      })
+    //设置表格高度对应屏幕高度
+    this.$nextTick(() => {
+      this.clientHeight = document.body.clientHeight - 250
+    })
     this.getList();
     this.getTreeselect();
+    this.getDicts("book_user_unit").then(response => {
+      this.unitOptions = response.data;
+    });
+    listPostUser({}).then(response => {
+      this.userOptions = response;
+    });
   },
   methods: {
+    // 状态字典翻译
+    unitFormat(row, column) {
+      return this.selectDictLabel(this.unitOptions, row.userUnit);
+    },
     /** 查询用户单位管理列表 */
     getList() {
+      let _this = this;
       this.loading = true;
       listUnit(this.queryParams).then(response => {
         this.unitList = response.rows;
         this.total = response.total;
         this.loading = false;
+        this.unitList.forEach(function (value, key, arr) {
+          let nickName = null;
+          let userIds = value.userIds;
+          if (userIds != null) {
+            _this.userOptions.forEach(function (v, k, arr) {
+              if (userIds == v.userId) {
+                nickName = v.nickName;
+              }
+            })
+          }
+          _this.unitList[key].nickName = nickName;
+        });
+      });
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
       });
     },
-     /** 查询部门下拉树结构 */
-     getTreeselect() {
-          treeselect().then(response => {
-              this.deptOptions = response.data;
-          });
-     },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -292,7 +341,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -309,6 +358,7 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改用户单位管理";
+        this.form.userIds = this.form.userIds - 0;
       });
     },
     /** 提交按钮 */
@@ -335,56 +385,101 @@ export default {
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$confirm('是否确认删除?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delUnit(ids);
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delUnit(ids);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      })
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
       this.$confirm('是否确认导出所有用户单位管理数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return exportUnit(queryParams);
-        }).then(response => {
-          this.download(response.msg);
-        })
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return exportUnit(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
     },
-      /** 导入按钮操作 */
-      handleImport() {
-          this.upload.title = "用户导入";
-          this.upload.open = true;
-      },
-      /** 下载模板操作 */
-      importTemplate() {
-          importTemplate().then(response => {
-              this.download(response.msg);
-          });
-      },
-      // 文件上传中处理
-      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(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-          this.getList();
-      },
-      // 提交上传文件
-      submitFileForm() {
-          this.$refs.upload.submit();
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "用户导入";
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      importTemplate().then(response => {
+        this.download(response.msg);
+      });
+    },
+    // 文件上传中处理
+    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(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+    //合并单元格
+    mergeMethod({row, column, rowIndex, columnIndex}) {
+      console.log(row)
+      console.log(column)
+      console.log(rowIndex)
+      console.log(columnIndex)
+      if (columnIndex === 0) {
+        const _row = this.setTable(this.unitList).merge[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
+      }
+      if (columnIndex === 1) {
+        const _row = this.setTable(this.unitList).merge[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        };
       }
+    },
+    //单元格整理
+    setTable(tableData) {
+      let spanArr = [],
+        concat = 0;
+      tableData.forEach((item, index) => {
+        if (index === 0) {
+          spanArr.push(1);
+        } else {
+          if (item.userUnit === tableData[index - 1].userUnit) {
+            //第一列需合并相同内容的判断条件
+            spanArr[concat] += 1;
+            spanArr.push(0);
+          } else {
+            spanArr.push(1);
+            concat = index;
+          }
+        }
+      });
+      return {
+        merge: spanArr
+      };
+    }
   }
 };
 </script>