大区

src/api/hardware/area.js

@@ -67,3 +67,12 @@ export function province() {
         method: 'get',
     })
 }
+
+
+// 删除大区地区
+export function delAreaProvince(ids) {
+    return request({
+        url: `/system/area/province/${ids}`,
+        method: 'DELETE',
+    })
+}

src/assets/styles/ruoyi.scss

@@ -22,6 +22,9 @@
 .mb5 {
 	margin-bottom: 5px;
 }
+.mb5 {
+	margin-bottom: 5px;
+}
 .mb8 {
 	margin-bottom: 8px;
 }

src/views/system/area/index.vue

@@ -15,7 +15,9 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button type="text" @click="view(scope.row)">查看省份</el-button>
+          <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看省份</el-button>
+
+          <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看省份</el-button> -->
           <el-button type="primary" icon="el-icon-edit" @click="editArea(scope.row)">修改</el-button>
           <el-button type="primary" icon="el-icon-delete" @click="delArea(scope.row)">删除</el-button>
         </template>
@@ -23,13 +25,57 @@
     </el-table>
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
     <el-dialog title="省份列表" :visible.sync="open" width="800px" append-to-body>
-      <el-checkbox-group v-model="areaData">
+      <el-row>
+        <el-col :span="8">
+          <span v-if="!areaData.length">该大区下暂无省份</span>
+          <el-row>
+            <el-tag class="mb5 mr5" v-for="tag in areaData" :key="tag.code" closable :type="tag.code" @close="handleDelAreaProvince(tag)">
+              {{tag.cityName}}
+            </el-tag>
+          </el-row>
+        </el-col>
+        <el-col :span="16">
+          <!-- <span>待选列表</span> -->
+          <!-- //tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())) -->
+          <el-table :data="provinceTableData" height="250" style="width: 100%" @selection-change="handleSelectionChange">
+            <!-- <el-table-column type="selection" width="55">
+            </el-table-column> -->
+            <el-table-column prop="cityName" label="省份名称">
+            </el-table-column>
+            <el-table-column prop="code" label="地区编码">
+            </el-table-column>
+            <el-table-column align="center" class-name="small-padding fixed-width">
+              <template slot="header" slot-scope="scope">
+                <el-input v-model="provinceSearch" size="mini" clearable="" placeholder="输入省份名搜索" />
+              </template>
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" icon="el-icon-plus" @click="addAreaProvince(scope.row)">添加省份</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+      <!-- <el-table :data="areaProvince" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55">
+        </el-table-column>
+        <el-table-column prop="id" label="大区ID">
+        </el-table-column>
+        <el-table-column prop="areaName" label="大区名称">
+        </el-table-column>
+        <el-table-column prop="ordinal" label="序数">
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <!-- <el-checkbox-group v-model="areaData">
         <el-checkbox v-for="data in provinceData" :key="data.code" :label="data.code" :value="data.code">{{data.cityName}}</el-checkbox>
-      </el-checkbox-group>
+      </el-checkbox-group> -->
-      <div slot="footer" class="dialog-footer">
+      <!-- <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submit">确 定</el-button>
         <el-button @click="open = false">取 消</el-button>
-      </div>
+      </div> -->
     </el-dialog>
 
     <!-- 大区弹框 -->
@@ -51,7 +97,7 @@
 </template>
 
 <script>
-import { list, areaSelect, getProvinceByArea, getProvinceByParent, province, save, saveProvince, del } from "@/api/hardware/area";
+import { list, areaSelect, getProvinceByArea, getProvinceByParent, province, save, saveProvince, del, delAreaProvince } from "@/api/hardware/area";
 export default {
   name: 'AreaList',
   data () {
@@ -68,6 +114,7 @@ export default {
       tableData: [],
       areaData: [], // 大区省份
       provinceData: [], // 所有省份
+      provinceSearch: '',
       // 表单参数
       areaForm: {},
       row: {}, // 大区
@@ -86,6 +133,11 @@ export default {
       },
     }
   },
+  computed: {
+    provinceTableData () {
+      return this.provinceData.filter(data => data.cityName.includes(this.provinceSearch) && -1 == this.areaData.findIndex(v => v.code == data.code))
+    }
+  },
   created () {
     province().then(res => {
       if (res.code == 200) {
@@ -145,20 +197,37 @@ export default {
         if (200 == res.code) {
           this.areaOpen = false;
           this.getList();
-        }else {
+        } else {
           this.msgError(res.msg);
         }
       })
     },
 
-    view (row) {
+    async view (row) {
       this.row = row;
-      getProvinceByArea(row.id).then(response => {
+      await this.getProvinceByArea(row.id)
-        this.areaData = response.data.map(v => v.code);
       this.open = true;
+    },
+    async getProvinceByArea (id) {
+      return getProvinceByArea(id).then(response => {
+        // this.areaData = response.data.map(v => v.code);
+        this.areaData = response.data;
       });
     },
-
+    addAreaProvince ({ code }) {
+      saveProvince({
+        ...this.row,
+        "provinceIds": [code]
+      }).then(res => {
+        this.getProvinceByArea(this.row.id)
+        this.$forceUpdate();
+      })
+    },
+    handleDelAreaProvince ({ id }) {
+      delAreaProvince(id).then(res => {
+        this.getProvinceByArea(this.row.id)
+      })
+    },
     submit () {
       saveProvince({
         ...this.row,
@@ -195,7 +264,7 @@ export default {
 </script>
 
 <style>
-.el-checkbox{
+.el-checkbox {
   width: 50px;
 }
 </style>