页面修改

src/components/studyAbroad/studyAbroad-form.vue

@@ -29,8 +29,8 @@
         </div>
          <div class="row wrap">
           <div class="col-6">
-            <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.StudyCountryId"
-              ref="School_Id" :options="CountryList" label="留学国家" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
+            <q-select filled stack-label option-value="ID" option-label="Name" v-model="objOption.StudyCountryId"
+              ref="StudyCountryId" :options="CountryList" label="留学国家" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
               map-options />
             
           </div>

src/components/system/area-form.vue

+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 800px;max-width:900px;">
+      <q-card-section>
+        <div class="text-h6">{{objOption.MenuId==0?'新增地区信息':'修改地区信息'}}</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="text-caption q-mb-lg q-px-md text-grey-6">地区信息</div>
+        <div class="row wrap">
+          <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.Name" ref="Name"
+            class="col-6 q-pr-lg q-pb-lg" label="地区名称" :rules="[val => !!val || '请填地区名称']" />
+          <q-select filled stack-label class="col-6 q-pr-lg" option-value="Id" option-label="Name"
+            v-model="objOption.CodeLevel" :options="LevelList" emit-value map-options label="等级"
+            @input="changeType()" />
+        </div>
+        <div class="row wrap">
+          <q-select clearable use-input :disable="objOption.CodeLevel==1" filled stack-label class="col-6 q-pr-lg q-pb-lg" option-value="ID"
+            option-label="Name" v-model="objOption.CountryId" :options="CountryList" emit-value map-options label="所属国家"
+            @input="changeProvice()" @filter="filterCountry" />
+          <q-select clearable use-input :disable="objOption.CodeLevel==2" filled stack-label class="col-6 q-pr-lg" option-value="ID"
+            option-label="Name" v-model="objOption.ProviceId" :options="ProviceList" emit-value map-options label="所属省份"
+            @input="changeCity()" @filter="filterProvice" />
+        </div>
+        <div class="row wrap">
+          <q-select clearable use-input :disable="objOption.CodeLevel==3" filled stack-label class="col-6 q-pr-lg q-pb-lg" option-value="ID"
+            option-label="Name" v-model="objOption.CityId" :options="CityList" emit-value map-options label="所属城市"
+            @filter="filterCity" />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
+          @click="setArea" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import {
+    queryCountryList,
+    queryAreaList,
+    queryAreaInfo,
+    saveArea
+  } from '../../api/common/common'
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        objOption: {
+          ID: 0, //地区编号
+          Name: "", //地区名称
+          ParentID: "", //父节点编号
+          CodeLevel: 1, //等级(1-国家，2-省份，3-城市，4-区县)
+          CountryId: "", //国家编号
+          ProviceId: "", //省份编号
+          CityId: "", //城市编号
+        },
+        //等级列表
+        LevelList: [{
+            Id: 1,
+            Name: "国家"
+          },
+          {
+            Id: 2,
+            Name: "省"
+          },
+          {
+            Id: 3,
+            Name: "市"
+          },
+          {
+            Id: 4,
+            Name: "区县"
+          },
+        ],
+        optionTitle: "",
+        CountryList: [], //国家列表
+        AllCountryList: [], //所有国家
+        ProviceList: [], //省份列表
+        AllProviceList: [], //所有省份
+        CityList: [], //城市列表
+        AllCityList: [], //所有城市列表
+        saveLoading: false,
+      }
+    },
+
+    created() {
+      this.getCountryList();
+    },
+    mounted() {
+      this.initObj()
+    },
+    methods: {
+      //筛选国家
+      filterCountry(val, update) {
+        update(() => {
+          if (val === '') {
+            this.CountryList = JSON.parse(JSON.stringify(this.AllCountryList))
+          } else {
+            const needle = val.toLowerCase();
+            this.CountryList = this.AllCountryList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
+          }
+        })
+      },
+      //筛选省份
+      filterProvice(val, update) {
+        update(() => {
+          if (val === '') {
+            this.ProviceList = JSON.parse(JSON.stringify(this.AllProviceList))
+          } else {
+            const needle = val.toLowerCase();
+            this.ProviceList = this.AllProviceList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
+          }
+        })
+      },
+      //筛选城市
+      filterCity(val, update) {
+        update(() => {
+          if (val === '') {
+            this.CityList = JSON.parse(JSON.stringify(this.AllCityList))
+          } else {
+            const needle = val.toLowerCase();
+            this.CityList = this.AllCityList.filter(v => v.Name.toLowerCase().indexOf(needle) > -1);
+          }
+        })
+      },
+      //获取国家列表
+      getCountryList() {
+        queryCountryList({}).then(res => {
+          this.CountryList = res.Data;
+          this.AllCountryList = res.Data;
+        })
+      },
+      //类型切换
+      changeType() {
+        this.objOption.CountryId = "";
+        this.objOption.ProviceId = "";
+        this.objOption.CityId = "";
+      },
+      //获取省份
+      changeProvice() {
+        if (this.objOption.CountryId != "") {
+          queryAreaList({
+            ParentID: this.objOption.CountryId
+          }).then(res => {
+            if (res.Code == 1) {
+              this.ProviceList = res.Data;
+              this.AllProviceList = res.Data;
+            }
+          })
+        }
+      },
+      //获取城市列表
+      changeCity() {
+        if (this.objOption.ProviceId != "") {
+          queryAreaList({
+            ParentID: this.objOption.ProviceId
+          }).then(res => {
+            if (res.Code == 1) {
+              this.CityList = res.Data;
+              this.AllCityList = res.Data;
+            }
+          })
+        }
+      },
+      //初始化表单
+      initObj() {
+        if (this.saveObj && this.saveObj.ID > 0) {
+          queryAreaInfo({
+            ID: this.saveObj.ID
+          }).then(res => {
+            var tempData = res.Data;
+            this.objOption.ID = tempData.ID;
+            this.objOption.Name = tempData.Name;
+            this.objOption.ParentID = tempData.ParentID;
+            this.objOption.CodeLevel = tempData.CodeLevel;
+            if (tempData.CountryId && tempData.CountryId == 0) {
+              this.objOption.CountryId = "";
+            } else {
+              this.objOption.CountryId = tempData.CountryId;
+            }
+            if (tempData.ProviceId && tempData.ProviceId == 0) {
+              this.objOption.ProviceId = "";
+            } else {
+              this.objOption.ProviceId = tempData.ProviceId;
+            }
+            if (tempData.CityId && tempData.CityId == 0) {
+              this.objOption.CityId = "";
+            } else {
+              this.objOption.CityId = tempData.CityId;
+            }
+            if (tempData.ProviceId && tempData.ProviceId > 0) {
+              this.changeProvice()
+            }
+            if (tempData.CityId && tempData.CityId > 0) {
+              this.changeCity();
+            }
+          })
+          this.optionTitle = "修改地区信息"
+        } else {
+          this.optionTitle = "新增地区"
+          this.objOption.ID = 0;
+          this.objOption.Name = '';
+          this.objOption.ParentID = '';
+          this.objOption.CodeLevel = 1;
+        }
+      },
+      //关闭弹窗
+      closeSaveForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      //保存菜单
+      setArea() {
+        this.saveLoading = true;
+        if (this.objOption.CodeLevel == 2) {
+          this.objOption.ParentID = this.objOption.CountryId;
+        }
+        if (this.objOption.CodeLevel == 3) {
+          this.objOption.ParentID = this.objOption.ProviceId;
+        }
+        if (this.objOption.CodeLevel == 4) {
+          this.objOption.ParentID = this.objOption.CityId;
+        }
+        saveArea(this.objOption).then(res => {
+          this.saveLoading = false
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: '数据保存成功！',
+            position: 'top'
+          })
+          this.$emit("success")
+          this.closeSaveForm()
+        }).catch(() => {
+          this.saveLoading = false
+        })
+      }
+    },
+  }
+</script>
\ No newline at end of file

src/components/system/menu-form.vue

@@ -109,7 +109,7 @@
       this.initObj()
     },
     methods: {
-      //筛选员工
+      //筛选菜单
       filterFn(val, update) {
         update(() => {
           if (val === '') {

src/pages/studyAbroad/studyabroad.vue

@@ -47,6 +47,9 @@
                   </a>
                 </div>
               </q-td>
+              <q-td v-if="col.name=='StudyCountryName'">
+                {{col.value}}
+              </q-td>
               <q-td v-if="col.name=='SchoolName'">
                 {{col.value}}
               </q-td>
@@ -259,14 +262,13 @@
         },
         dataList: [],
         loading: true,
-        columns: [
-          {
+        columns: [{
             name: 'Remark',
             label: '备注',
             field: 'Remark',
             align: 'left'
           },
-           {
+          {
             name: 'ProductTypeName',
             label: '类型',
             field: 'ProductTypeName',
@@ -284,6 +286,12 @@
             field: 'SupplierName',
             align: 'left'
           },
+          {
+            name: 'StudyCountryName',
+            label: '留学国家',
+            field: 'StudyCountryName',
+            align: 'left'
+          },
           {
             name: 'SchoolName',
             label: '所属校区',
@@ -346,10 +354,10 @@
         ],
         //表格可见列
         visibleColumns: [
-          'Remark', 'Name', 'SchoolName', 'SuggestPrice', 'SellPrice', "PreferentialList",
+          'Remark', 'Name', 'StudyCountryName', 'SchoolName', 'SuggestPrice', 'SellPrice', "PreferentialList",
           "PreferentialListSellCommission",
           "PreferentialListB2BCommission",
-          "EducationCommission", 'SaleStateName', 'Id', 'SupplierName','ProductTypeName'
+          "EducationCommission", 'SaleStateName', 'Id', 'SupplierName', 'ProductTypeName'
         ], //可见列
         PageCount: 0,
         isShowStudy: false, //是否显示留学弹窗
@@ -551,7 +559,6 @@
       }
     }
   }
-
 </script>
 <style scoped>
   .border-bottom {
@@ -559,9 +566,7 @@
     padding-bottom: 5px;
     margin-bottom: 5px;
   }
-
 </style>
 <style lang="sass">
   @import url('~assets/css/table.sass')
-
-</style>
+</style>
\ No newline at end of file

src/pages/system/area.vue

@@ -48,6 +48,9 @@
           <q-td :props="props">
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
               @click="editArea(props.row)" />
+
+            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
+              @click="delArea(props.row)" />
           </q-td>
         </template>
       </q-table>
@@ -58,7 +61,8 @@
 </template>
 <script>
   import {
-    queryAreaPage
+    queryAreaPage,
+    deleteArea
   } from '../../api/common/common'
   import areaForm from '../../components/system/area-form'
   export default {
@@ -132,6 +136,34 @@
       this.getAreapage();
     },
     methods: {
+      //删除地区
+      delArea(item) {
+        var that=this;
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除？',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          let delMsg = {
+            ID: item.ID,
+          }
+          deleteArea(delMsg).then(res => {
+            if (res.Code == 1) {
+              that.$q.notify({
+                icon: 'iconfont icon-chenggong',
+                color: 'accent',
+                timeout: 2000,
+                message: '操作成功',
+                position: 'top'
+              })
+              that.refreshPage();
+            }
+          })
+        })
+      },
       //刷新页面
       refreshPage() {
         this.isShowAreaForm = false;