地区分类管理

src/components/WebSet/WebSiteArea.vue

 <style>
+.el-tag + .el-tag {
+    margin-left: 10px;
+  }
   .WebSiteArea .el-button.is-circle {
     padding: 6px;
   }
@@ -7,10 +10,12 @@
     color: #409eff;
     text-decoration: underline
   }
-.addlist {
+  .absolute {
   position: absolute;
   right: 158px;
   top: 6px;
+  }
+.addIcon {
   cursor: pointer;
   color: #E95252;
   width: 30px;
@@ -35,10 +40,10 @@
       <ul>
         <li>
           <label>名称</label>
-          <el-input v-model="msg.CategoryName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
+          <el-input v-model="msg.Name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
           </el-input>
         </li>
-        <li>
+        <!-- <li>
           <label>层级</label>
               <el-select v-model="msg.Level" placeholder="请选择">
                 <el-option label="请选择" :value="0"></el-option>
@@ -49,8 +54,12 @@
         </li>
         <li>
           <label>启用状态</label>
-          <el-switch v-model="msg.Enable"></el-switch>
-        </li>
+              <el-select v-model="msg.Enable" placeholder="请选择">
+                <el-option label="全部" :value="0"></el-option>
+                <el-option label="启用" :value="1"></el-option>
+                <el-option label="禁用" :value="2"></el-option>
+              </el-select>
+        </li> -->
         <li>
           <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
             @click="resetPageIndex(),getData()" />
@@ -85,15 +94,15 @@
     </div>
 
     <el-dialog title="地区设置" :visible.sync="outerVisible" center width="1000px">
-      <el-form :model="addMsg" ref="addMsg" label-width="120px">
+      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="名称">
+            <el-form-item label="名称" prop="AreaName">
               <el-input type="text" v-model="addMsg.AreaName" maxlength="50" placeholder="名称">
               </el-input>
             </el-form-item>
-            <el-form-item label="层级">
-              <el-select v-model="addMsg.Level" placeholder="请选择" @change="getAreaList()">
+            <el-form-item label="层级" prop="Level">
+              <el-select v-model="addMsg.Level" placeholder="请选择" @change="areaLevelChange">
                 <el-option label="请选择" :value="0"></el-option>
                 <el-option label="洲" :value="1"></el-option>
                 <el-option label="国家" :value="2"></el-option>
@@ -101,30 +110,36 @@
                 <el-option label="省市" :value="4"></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="上级">
+            <el-form-item label="上级" prop="ParentId">
               <el-select v-model="addMsg.ParentId" placeholder="请选择">
                 <el-option label="请选择" :value="0"></el-option>
                 <el-option v-for="(item,index) in AreaList" :key="index" :label="item.AreaName" :value="item.Id">
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="目的地信息">
-              <div class="relative">
-                <div>目的地信息</div>
-              <i class="el-icon-circle-plus addlist" @click="clickArea(0, 1)"></i>
-              </div>
-              <div class="relative" v-for="(item, index) in addMsg.DestinationList" :key="index">
+            <el-form-item label="目的地信息" prop="DestinationList">
+              
+              <!-- <div class="relative" v-for="(item, index) in addMsg.DestinationList" :key="index">
                 <span>{{item.Name}}</span>
-                <i class="el-icon-delete addlist" @click="clickArea(index)"></i>
-              </div>
+                <i class="el-icon-delete addIcon absolute" @click="clickArea(index)"></i>
+              </div> -->
+              <el-tag
+                :key="index"
+                v-for="(item, index) in addMsg.DestinationList"
+                closable
+                :disable-transitions="false"
+                @close="clickArea(index)">
+                {{item.Name}}
+              </el-tag>
+              <i v-if="showAddArea" class="el-icon-circle-plus addIcon" style="margin-left: 10px" @click="clickArea(0, 1)"></i>
             </el-form-item>
-            <el-form-item label="介绍">
-              <el-input v-model="addMsg.Introduction" />
+            <el-form-item label="介绍" prop="Introduction">
+              <el-input type="textarea" :rows="2" v-model="addMsg.Introduction" />
             </el-form-item>
-            <el-form-item label="时区">
+            <el-form-item label="时区" prop="TimeZones">
               <el-input v-model="addMsg.TimeZones" />
             </el-form-item>
-            <el-form-item label="币种">
+            <el-form-item label="币种" prop="CurrencyId">
             <el-select  filterable  v-model='addMsg.CurrencyId' placeholder="选择币种" class=" _border_b_1">
                 <el-option v-for='item in coinGetList'
                     :label='item.Name'
@@ -133,18 +148,18 @@
                 </el-option>
             </el-select>
             </el-form-item>
-            <el-form-item label="电压">
+            <el-form-item label="电压" prop="Voltage">
               <el-input v-model="addMsg.Voltage" />
             </el-form-item>
-            <el-form-item label="最佳旅行时间">
+            <el-form-item label="最佳旅行时间" prop="BestTravelTimeList">
               <div class="relative" v-for="(item, index) in addMsg.BestTravelTimeList" :key="index">
-                <div class="flex"><span>月份说明</span><el-input style="width: 220px" v-model="item.Month" /></div>
-                <div class=flex><span>理由说明</span><el-input style="width: 620px" v-model="item.Description" /></div>
-                <i v-if="index == 0" class="el-icon-circle-plus addlist" @click="clickTime(index, 1)"></i>
-                <i v-else class="el-icon-delete addlist" @click="clickTime(index)"></i>
+                <div class="flex"><span>月份</span> &nbsp; &nbsp;<el-input style="width: 220px" v-model="item.Month" /></div>
+                <div class=flex><span>理由</span> &nbsp; &nbsp;<el-input style="width: 780px" v-model="item.Description" /></div>
+                <i v-if="index == 0" class="el-icon-circle-plus addIcon absolute" @click="clickTime(index, 1)"></i>
+                <i v-else class="el-icon-delete addIcon absolute" @click="clickTime(index)"></i>
               </div>
             </el-form-item>
-            <el-form-item label="图片">
+            <el-form-item label="图片" prop="image">
               <!-- <el-input v-model="addMsg.ImageList" /> -->
               <uploadImg ref="uploadImg"></uploadImg>
             </el-form-item>
@@ -156,8 +171,12 @@
         <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
       </div>
     </el-dialog>
-    <el-dialog title="选择目的地" :visible.sync="areaVisible" @close="addArea" center width="600px">
+    <el-dialog title="选择目的地" :visible.sync="areaVisible" center width="600px">
       <area-select @change="changeSelectArea"></area-select>
+      <div slot="footer" class="dialog-footer">
+        <button class="normalBtn" type="primary" @click="addArea">{{$t('pub.saveBtn')}}</button> &nbsp;
+        <button class="hollowFixedBtn" @click="areaVisible = false">{{$t('pub.cancelBtn')}}</button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -171,6 +190,25 @@ import uploadImg from '../../pubComponents/uploadImg'
     },
     data() {
       return {
+        showAddArea: true,
+        rules: {
+          AreaName: [
+            { required: true, message: '请输入名称', trigger: 'blur' },
+          ],
+          Level: [
+            { required: true, message: '请选择层级', trigger: 'change' }
+          ],
+          Introduction: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
+          TimeZones: [
+            { required: true, message: '请输入时区', trigger: 'blur' },
+          ],
+          CurrencyId: [
+            { required: true, message: '请选择币种', trigger: 'change' }
+          ],
+          Voltage: [
+            { required: true, message: '请输入电压', trigger: 'blur' },
+          ], 
+        },
             //币种下拉
             coinGetList:[],
         areaVisible: false,
@@ -212,6 +250,24 @@ import uploadImg from '../../pubComponents/uploadImg'
       this.financeinfo_post_GetList()
     },
     methods: {
+      areaLevelChange() {
+        const level = this.addMsg.Level;
+        this.level = level
+        if(level === 1) {
+          this.showAddArea = false
+          this.addMsg.DestinationList = []
+        } else if(level === 2) {
+          if(this.addMsg.DestinationList.length > 1) {
+            this.addMsg.DestinationList.length = 1
+            this.showAddArea = false
+          } else {
+            this.showAddArea = true
+          }
+        } else {
+          this.showAddArea = true
+        }
+        this.getAreaList()
+      },
       getAreaList() {
         var level = 0;
         if (this.addMsg.Level) {
@@ -306,9 +362,23 @@ import uploadImg from '../../pubComponents/uploadImg'
         this.addMsg.AreaName = "";
       },
       //新增、修改广告
-      submitForm(addMsg) {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
             const imageList = this.$refs.uploadImg.ImageList
         console.log('submitForm', this.addMsg, imageList)
+        if(!imageList.length) {
+          this.$message.error('请上传图片!');
+          return
+        }
+        if(this.level !== 1 && !this.addMsg.DestinationList.length) {
+          this.$message.error('请添加目的地!');
+          return
+        }
+        if(this.addMsg.BestTravelTimeList.some(item => !item.Month || !item.Description)) {
+          this.$message.error('请完善最佳旅行时间!');
+          return
+        }
         this.addMsg.ImageList = imageList
         this.apipost(
           "ws_post_SetArea", this.addMsg,
@@ -324,6 +394,10 @@ import uploadImg from '../../pubComponents/uploadImg'
           },
           err => {}
         );
+          } else {
+            return false;
+          }
+        });
       },
       //获取币种
         financeinfo_post_GetList(){
@@ -338,6 +412,9 @@ import uploadImg from '../../pubComponents/uploadImg'
           this.areaVisible = true
         } else {
           this.addMsg.DestinationList.splice(index, 1)
+          if(this.level === 2 && this.addMsg.DestinationList.length < 1) {
+            this.showAddArea = true
+          }
         }
       },
       clickTime(index, type) {
@@ -351,7 +428,7 @@ import uploadImg from '../../pubComponents/uploadImg'
         if(this.areaInfo) {
           this.addMsg.DestinationList.push(this.areaInfo)
         }
-        console.log('addArea', this.areaInfo, this.addMsg)
+        this.areaVisible = false
         this.areaInfo = null
       },
       changeSelectArea(area) {

src/pubComponents/uploadImg.vue

 <template>
-<div>
+<div class="scenicSpotInfoManage">
           <div class="resource-list">
             <div class="resource-imglist clearfix">
               <div class="re-img" v-for="(item, index) in ImageList" :key="index">