11

src/views/emis/emisRegion/index.vue

@@ -1,5 +1,93 @@
 <template>
   <div class="app-container">
+    <el-row :gutter="20" type='flex'>
+      <el-col :span="5" :xs="5">
+      <div class="head-container">
+        <el-row :gutter="10">
+          <el-col :span="15" :xs="15">
+            <el-input
+            v-model="countryName"
+            placeholder="国家名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+            />
+          </el-col>
+        </el-row>
+      </div>
+      <div class="head-container">
+        <el-tree
+          ref="tree"
+          class="filter-tree tree"
+          :data="countryTree"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          node-key="id"
+          highlight-current
+          default-expand-all
+          @node-click="handleNodeClick"
+        >
+        </el-tree>
+      </div>
+      </el-col>
+      <el-col :span="4" :xs="4">
+      <div class="head-container">
+        <el-row :gutter="10">
+          <el-col :span="15" :xs="15">
+            <el-input
+            v-model="areaName"
+            placeholder="片区"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+            />
+          </el-col>
+          <el-col :span="4" :xs="4">
+            <el-button
+            type="normal"
+            size="mini"
+            icon="el-icon-plus"
+            :disabled="false"
+            @click="handleAreaAdd">
+          </el-button>
+          </el-col>
+         
+        </el-row>
+      </div>
+
+      <div class="head-container">
+        <el-tree
+          ref="areaTree"
+          class="filter-tree tree"
+          :data="areaTree"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          node-key="id"
+          highlight-current
+          default-expand-all
+          @node-click="handleNodeAreaClick"
+        >
+            <span slot-scope="{ node, data }"
+                @mouseenter="mouseenter(data)"
+                @mouseleave="mouseleave(data)"
+                style="width:100%">
+              <template>
+                <span style="font-size:13px">{{ data.label }}</span>
+                <span v-show="data.show && data.id > 0" style="margin-left: 10px;">
+                  <i @click="handleUpdateArea(data)" class="el-icon-edit"></i>
+                  <i @click="handleDeleteArea(data)" class="el-icon-delete"></i>
+                </span>
+              </template>
+            </span>
+        </el-tree>
+      </div>
+
+      </el-col>
+	    <el-col :span="20" :xs="20">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 
       <el-form-item label="" prop="regionName">
@@ -183,37 +271,53 @@
       </div>
     </el-dialog>
 
+    <el-dialog :title="titleForm" :visible.sync="openForm" width="500px" append-to-body>
+      <emisCountryAreaForm :id="currentId"   @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisCountryAreaForm>
+    </el-dialog>
 
     <el-dialog :title="titleView" :visible.sync="openView" width="60%" :close-on-click-modal="false"  append-to-body>
         <emisRegionView :id="id" ></EmisRegionView>
     </el-dialog>
-
+  </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { listEmisRegion, getEmisRegion, delEmisRegion, addEmisRegion, updateEmisRegion } from "@/api/emis/emisRegion";
+import { listEmisCountry, getEmisCountry, delEmisCountry, addEmisCountry, updateEmisCountry } from "@/api/emis/emisCountry";
+import { listEmisCountryArea, getEmisCountryArea, delEmisCountryArea, addEmisCountryArea, updateEmisCountryArea } from "@/api/emis/emisCountryArea";
 import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
 import emisRegionView from '@/views/emis/emisRegion/emisRegionView';
 import emisRegionForm from '@/views/emis/emisRegion/emisRegionForm';
+import emisCountryAreaForm from '@/views/emis/emisCountryArea/emisCountryAreaForm';
 
 export default {
   name: "emisRegion",
-  components: { elDateSimplePicker,emisRegionView,emisRegionForm },
+  components: { elDateSimplePicker,emisRegionView,emisRegionForm ,emisCountryAreaForm},
   dicts: [
         'emis_region_level_type',
   ],
   data() {
     return {
+      countryName:"",
+      areaName:'',
+      currentId:0,
       // 是否展开，默认全部折叠
       isExpandAll: false,
       // 重新渲染表格状态
       refreshTable: true,
-
+      countryTree:[],
+      countryIdsOptions:[],
+      areaTree:[],
+      countryAreaIdsOptions:[],
       tableDataCopy:[],
       tableData:[],
       showTable:false,
-
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
 
       // 遮罩层
       loading: true,
@@ -279,6 +383,16 @@ export default {
   },
   created() {
     this.getList();
+    this.getCountryList();
+  },
+  watch: {
+    // 根据名称筛选部门树
+    countryName(val) {
+      this.$refs.tree.filter(val);
+    },
+    areaName(val) {
+      this.$refs.areaTree.filter(val);
+    },
   },
   methods: {
     /** 查询四级省市区镇表列表 */
@@ -299,6 +413,48 @@ export default {
         this.loading = false;
       });
     },
+    getAreaList(){
+      this.loading = true;
+      listEmisCountryArea(this.queryParams).then(response => {
+          this.loading = false;
+		      this.areaTree = [];
+          this.countryAreaIdsOptions = [];
+          var cTree={"id":"","label":"片区","children":[]};
+          //var lastContinentId = -1;
+          response.rows.forEach(item =>{
+              var optItem={value:item.id,label:item.name};
+              this.countryAreaIdsOptions.push(optItem)
+
+              var treeItem={"id":item.id,"label":item.name,"show":false};
+              cTree.children.push(treeItem);
+              //lastContinentId = item.id;
+          });
+          //this.queryParams.continentId = lastContinentId;
+          this.areaTree.push(cTree);
+          //this.getList();
+      });
+    },
+    getCountryList() {
+      this.loading = true;
+      listEmisCountry(this.queryParams).then(response => {
+         this.loading = false;
+		      this.countryTree = [];
+          this.countryIdsOptions = [];
+          var cTree={"id":"","label":"国家列表","children":[]};
+          //var lastContinentId = -1;
+          response.rows.forEach(item =>{
+              var optItem={value:item.id,label:item.name};
+              this.countryIdsOptions.push(optItem)
+
+              var treeItem={"id":item.id,"label":item.name};
+              cTree.children.push(treeItem);
+              //lastContinentId = item.id;
+          });
+          //this.queryParams.continentId = lastContinentId;
+          this.countryTree.push(cTree);
+          //this.getAreaList();
+      });
+    },
     load (tree, treeNode, resolve) {
       // 层级关系备份
       const idCopy = JSON.parse(JSON.stringify(tree.idList))
@@ -345,6 +501,31 @@ export default {
       this.open = false;
       this.reset();
     },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+	  // 节点单击事件
+    handleNodeClick(data) {
+        this.queryParams.countryId = data.id;
+        //this.form.continentId= data.id;
+        this.handleCountryAreaQuery();
+    },
+    // 节点单击事件
+    handleNodeAreaClick(data) {
+        this.queryParams.areaId = data.id;
+        //this.form.continentId= data.id;
+        this.handleAreaQuery();
+    },
+    mouseenter(data) {
+      console.log("111"+data);
+      this.$set(data, 'show', true)
+    },
+    mouseleave(data) {
+      console.log("222"+data);
+      this.$set(data, 'show', false)
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -376,6 +557,16 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    /** 搜索按钮操作 */
+    handleAreaQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 搜索按钮操作 */
+    handleCountryAreaQuery() {
+      this.queryParams.pageNum = 1;
+      this.getAreaList();
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
@@ -418,6 +609,26 @@ export default {
     //    this.openEmisRegion = true;
     //    this.titleEmisRegion = "修改";
 
+    },
+    /** 新增按钮操作 */
+    handleAreaAdd(row) {
+      this.reset();
+      this.openForm = true;
+      this.title = "新增";
+    },
+    handleUpdateArea(row){
+      this.currentId = row.id || this.ids;
+      this.openForm = true;
+		  this.titleForm = "修改";
+    },
+    handleDeleteArea(row){
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除').then(function() {
+        return delEmisCountryArea(ids);
+      }).then(() => {
+        this.getAreaList()
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
     },
     handleView(row) {
        this.id=row.id;