feat: config region

ittpc/src/views/modules/config/config.vue

@@ -1,17 +1,24 @@
 <template>
   <div class="config-page" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
-    <el-row>
+    <!-- <el-row>
       <el-col :span="4" style="padding:0 20px;">
         <h3>地区维护+预约次数配置</h3>
       </el-col>
       <el-col :span="3" style="padding:0 20px;">
         <el-button type="primary" size="mini" style="margin:18px 0" @click="handleRefresh">刷新</el-button>
       </el-col>
+    </el-row> -->
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-button size="small" type="primary" @click="handleRegionAdd" style="width:100px">添加地区</el-button>
+        <el-button size="small" plain @click="handleRegionEdit" style="width:100px">编辑地区</el-button>
+      </el-col>
     </el-row>
     <el-row>
       <el-col :span="24" style="padding:0 20px;">
-        <el-table :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
-          <el-table-column type="index" align="center" label="序号"></el-table-column>
+        <el-table ref="table" :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
+          <el-table-column type="selection" width="50"></el-table-column>
+          <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
           <el-table-column prop="province" label="省" align="center"></el-table-column>
           <el-table-column prop="city" label="市" align="center"></el-table-column>
           <el-table-column prop="county" label="区" align="center"></el-table-column>
@@ -24,7 +31,7 @@
           </el-table-column>
           <el-table-column prop="times" label="预约次数配置" align="center">
             <template slot-scope="scope">
-              <el-button plain size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button plain size="mini" @click="handleEdit(scope.row)">配置预约次数</el-button>
               <el-button plain size="mini" @click="handleView(scope.row)">查看</el-button>
             </template>
           </el-table-column>
@@ -37,7 +44,7 @@
         </el-table>
       </el-col>
     </el-row>
-    <el-dialog :title=" isEdit ? '编辑预约次数' : '查看预约次数'" :visible.sync="dialogVisible" width="35%" @close="handleDialogClose" @open="handleDialogOpen">
+    <el-dialog :title=" isEdit ? '配置预约次数' : '查看预约次数'" :visible.sync="dialogVisible" width="35%" @close="handleDialogClose" @open="handleDialogOpen">
       <h3>{{editObj.province}}{{editObj.city}}{{editObj.county}}：</h3>
       <div class="8-12 dialog-item">
         <span>08:30-12:00，预约</span>
@@ -59,16 +66,76 @@
         <el-button type="primary" :loading="configLoading" @click="handleSubmitConfig" size="small" style="width:100px;">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog :title="isRegionEdit ? '新增地区' : '编辑地区'" :visible.sync="addRegionVisible" width="700px">
+      <div class="region-add" v-loading="addLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" @closed="handleCancelAdd">
+        <el-form label-width="115px" :model="updateForm" class="demo-form-inline" size="small" ref="updateForm" :rules="addFormRules">
+          <el-form-item label="省" prop="province">
+            <el-input v-model="updateForm.province" placeholder="请输入省"></el-input>
+          </el-form-item>
+          <el-form-item label="市" prop="city">
+            <el-input v-model="updateForm.city" placeholder="请输入市"></el-input>
+          </el-form-item>
+          <el-form-item label="区" prop="county">
+            <el-input v-model="updateForm.county" placeholder="请输入区"></el-input>
+          </el-form-item>
+          <el-form-item label="地区编码" prop="regionCode">
+            <el-input v-model="updateForm.regionCode" placeholder="地区编码（身份证前几位编码）"></el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <!-- 状态 true 启用，false 禁用 -->
+            <el-select style="width:100%"  v-model="updateForm.status" placeholder="请选择">
+              <el-option label="启用" value="1"></el-option>
+              <el-option label="禁用" value="0"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="地区车辆总数" prop="carTotal">
+            <el-input-number style="width:100%" v-model="updateForm.carTotal" controls-position="right"  :min="0" :max="100000"></el-input-number>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" class="width100" @click="handleCancelAdd">取 消</el-button>
+        <el-button type="primary" size="small" class="width100" @click="handleSubmitAdd" :disabled="addLoading">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getRegionList, setRegionConfig } from '@/request/request'
+import { getRegionList, setRegionConfig, addRegion, editRegion } from '@/request/request'
 export default {
   name: 'config',
   data() {
     return {
       loading: false,
+      updateForm: {
+        province: '',
+        city: '',
+        county: '',
+        regionCode: '',
+        status: '1',
+        carTotal: ''
+      },
+      isRegionEdit: true,
+      addFormRules:{
+        province: [
+          { required: true, message: '请输入省', trigger: 'change' }
+        ],
+        city: [
+          { required: true, message: '请输入市', trigger: 'change' }
+        ],
+        county: [
+          { required: true, message: '请输入区', trigger: 'change' }
+        ],
+        regionCode: [
+          { required: true, message: '请输入地区编码', trigger: 'change' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', trigger: 'change' }
+        ]
+      },
+      addRegionVisible: false,
+      addLoading: false,
       configLoading: false,
       dialogVisible: false,
       tableData: [],
@@ -88,6 +155,85 @@ export default {
     this.getRegionListFn()
   },
   methods: {
+    handleCancelAdd () {
+      this.addRegionVisible = false
+      this.updateForm.province = ''
+      this.updateForm.city = ''
+      this.updateForm.county = ''
+      this.updateForm.regionCode = ''
+      this.updateForm.status = '1'
+      this.updateForm.carTotal = 0
+      this.$refs.updateForm.clearValidate()
+    },
+    handleSubmitAdd () {
+      this.$refs['updateForm'].validate((valid) => {
+        if (valid) {
+          if (this.isRegionEdit) {
+            let data = {
+              regionId: this.updateForm.configId,
+              province: this.updateForm.province,
+              city: this.updateForm.city,
+              county: this.updateForm.county,
+              status: !!Number(this.updateForm.status),
+              carTotal: this.updateForm.carTotal || '',
+              regionCode: this.updateForm.regionCode
+            }
+            this.addLoading = true
+            editRegion(data).then(res => {
+              this.addLoading = false
+              this.addRegionVisible = false
+              this.$message({
+                message: '编辑成功',
+                type: 'success'
+              })
+              this.getRegionListFn()
+            }).catch(e => {
+              this.addLoading = false
+            })
+          } else {
+            let data = {
+              province: this.updateForm.province,
+              city: this.updateForm.city,
+              county: this.updateForm.county,
+              status: !!Number(this.updateForm.status),
+              carTotal: this.updateForm.carTotal,
+              regionCode: this.updateForm.regionCode
+            }
+            this.addLoading = true
+            addRegion(data).then(res => {
+              this.addLoading = false
+              this.addRegionVisible = false
+              this.$message({
+                message: '新增成功',
+                type: 'success'
+              })
+              this.getRegionListFn()
+            }).catch(e => {
+              this.addLoading = false
+            })
+          }
+        }
+      })
+    },
+    handleRegionEdit () {
+      let chosedTableList = this.$refs.table.selection
+      console.log(chosedTableList)
+      if (chosedTableList.length !== 1) {
+        this.$message.error('请选择一条数据编辑')
+      } else {
+        const item = chosedTableList[0]
+        this.addRegionVisible = true
+        this.isRegionEdit = true
+        this.updateForm = {
+          ...item,
+          status: item.status ? '1' : '0'
+        }
+      }
+    },
+    handleRegionAdd () {
+      this.isRegionEdit = false
+      this.addRegionVisible = true
+    },
     handleRefresh () {
       this.getRegionListFn()
     },
@@ -185,6 +331,9 @@ export default {
 .config-page {
   width: 100%;
   height: 100%;
+  .padding20 {
+    padding: 20px;
+  }
   .dialog-item {
     width: 100%;
     height: 50px;
@@ -201,6 +350,12 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    .width100 {
+      width: 100px;
+    }
+  }
+  .region-add {
+    width: 600px
   }
 }
 </style>

ittpc/src/views/modules/staff/query.vue

@@ -276,7 +276,7 @@ export default {
       this.addLoading = false
       this.$message.error('头像上传失败，请重新上传！')
     },
-    onAddPreview () {
+    onAddPreview (event, file, fileList) {
       this.addLoading = true
     },
     handleSubmitEdit () {