区域管理完善

components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

src/request/api.js

@@ -50,4 +50,12 @@ export const  apisystemdzbcAreaAdd = query => {
         method: 'POST',
         data:query
     });
+};
+//https://khy.xiaole.vip/api/system/dzbcArea修改定制班车-区域
+export const  apisystemdzbcAreaUpdate = query => {
+    return service({
+        url: `/api/system/dzbcArea`,
+        method: 'PUT',
+        data:query
+    });
 };

src/views/areaman/index.vue

@@ -1,109 +1,82 @@
 <script setup lang="ts">
-import { apisystemdzbcArealist,apisystemdzbcAreaexport,apisystemdzbcAreaDel,apisystemdzbcAreaAdd } from '../../request/api.js'
+import { apisystemdzbcArealist,apisystemdzbcAreaexport,apisystemdzbcAreaDel,apisystemdzbcAreaAdd,apisystemdzbcAreaUpdate } from '../../request/api.js'
 import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
-
+import { ElMessage } from 'element-plus'
 interface RuleForm {
   name: string
-  region: string
-  count: string
-  date1: string
-  date2: string
-  delivery: boolean
+  addr: string
   location: string
-  type: string[]
-  resource: string
-  desc: string
+  remark: string
+  kyzId: string
+}
+const initData={
+  name: "",
+  addr: "",
+  location: "",
+  remark: "",
+  kyzId:""
 }
-
 const formSize = ref<ComponentSize>('default')
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive<RuleForm>({
-  name: 'Hello',
-  region: '',
-  count: '',
-  date1: '',
-  date2: '',
-  delivery: false,
-  location: '',
-  type: [],
-  resource: '',
-  desc: '',
+  name: "",
+  addr: "",
+  location: "",
+  remark: "",
+  kyzId:""
 })
 
 
 const rules = reactive<FormRules<RuleForm>>({
   name: [
-    { required: true, message: 'Please input Activity name', trigger: 'blur' },
-    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
-  ],
-  region: [
-    {
-      required: true,
-      message: 'Please select Activity zone',
-      trigger: 'change',
-    },
-  ],
-  count: [
-    {
-      required: true,
-      message: 'Please select Activity count',
-      trigger: 'change',
-    },
-  ],
-  date1: [
-    {
-      type: 'date',
-      required: true,
-      message: 'Please pick a date',
-      trigger: 'change',
-    },
-  ],
-  date2: [
-    {
-      type: 'date',
-      required: true,
-      message: 'Please pick a time',
-      trigger: 'change',
-    },
-  ],
-  location: [
-    {
-      required: true,
-      message: 'Please select a location',
-      trigger: 'change',
-    },
-  ],
-  type: [
-    {
-      type: 'array',
-      required: true,
-      message: 'Please select at least one activity type',
-      trigger: 'change',
-    },
-  ],
-  resource: [
-    {
-      required: true,
-      message: 'Please select activity resource',
-      trigger: 'change',
-    },
-  ],
-  desc: [
-    { required: true, message: 'Please input activity form', trigger: 'blur' },
-  ],
+    { required: true, message: '必填项', trigger: 'blur' }
+  ]
 })
 
 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
+  if (!formEl) {
+    ElMessage({
+          message: '缺少必填项',
+          type: 'warning',
+          duration: 3 * 1000
+    });
+    return
+  }
   await formEl.validate((valid, fields) => {
     if (valid) {
-      apisystemdzbcAreaAdd(ruleForm).then((res:any)=>{
-
-      }).catch((err:any)=>{
-        console.log(err)
-      })
+      if(ruleForm.id){
+        
+        apisystemdzbcAreaUpdate(ruleForm).then((res:any)=>{
+          getTableData()
+          ElMessage({
+                message: '操作成功',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          dialogVisible.value=false
+        }).catch((err:any)=>{
+          console.log(err)
+        })
+      }else{
+        apisystemdzbcAreaAdd(ruleForm).then((res:any)=>{
+          getTableData()
+          ElMessage({
+                message: '操作成功',
+                type: 'success',
+                duration: 3 * 1000
+          });
+          dialogVisible.value=false
+        }).catch((err:any)=>{
+          console.log(err)
+        })
+      }
+      
     } else {
-      console.log('error submit!', fields)
+      ElMessage({
+            message: '缺少必填项',
+            type: 'warning',
+            duration: 3 * 1000
+      });
     }
   })
 }
@@ -115,15 +88,26 @@ let searchWord=ref('')
 let total=ref(0)
 let pageNum=ref(1)
 let dialogVisible=ref(false)
-let logtitle=ref('新增用户')
+let logtitle=ref('新增定制班车-区域')
 let loading=ref(true)
 let excellloading=ref(false)
 const tableData = ref([])
 //v-loading="excellloading" @click="downExcell"
 let activeName=ref('first')
 
-const addUser=val=>{
-  dialogVisible.value=val
+const addItem=data=>{
+  if(data.id){
+    for(let key in data){
+      ruleForm[key]=data[key]
+    }
+    logtitle.value='编辑定制班车-区域'
+  }else{
+    for(let key in initData){
+      ruleForm[key]=initData[key]
+    }
+    logtitle.value='新增定制班车-区域'
+  }
+  dialogVisible.value=true
 }
 const downExcell=()=>{
   excellloading.value=true
@@ -154,6 +138,7 @@ const getTableData=()=>{
     
   }).then(res=>{
     if(res.code==200){
+      total.value=res.total
       tableData.value=res.rows
     }
     loading.value=false
@@ -165,7 +150,12 @@ const getTableData=()=>{
 //
 const deleteItem=(id)=>{
   apisystemdzbcAreaDel({id}).then((res:any)=>{
-
+    getTableData()
+    ElMessage({
+          message: '操作成功',
+          type: 'success',
+          duration: 3 * 1000
+    });
   }).catch((err:any)=>{
     console.log(err)
   })
@@ -189,7 +179,7 @@ onMounted(()=>{
           </div>
         </div>
         <div class="right-part">
-          <el-button type="primary" :icon="Plus" @click="addUser(true)">新增区域</el-button>
+          <el-button type="primary" :icon="Plus" @click="addItem({})">新增区域</el-button>
         </div>
        </div>
 
@@ -229,10 +219,15 @@ onMounted(()=>{
                         <el-table-column prop="by" label="所属客运站" />
                         <el-table-column fixed="right" label="操作" min-width="120">
                           <template #default="scope">
-                            <el-button link type="primary" size="small">
+                            <el-button link type="primary" @click="addItem(scope.row)" size="small">
                               编辑
                             </el-button>
-                            <el-button @click="deleteItem(scope.row.id)" link type="danger" size="small">删除</el-button>
+                            <el-popconfirm @confirm="deleteItem(scope.row.id)" title="确定删除?">
+                              <template #reference>
+                                <el-button  link type="danger" size="small">删除</el-button>
+                              </template>
+                            </el-popconfirm>
+                            
                           </template>
                         </el-table-column>
                     </el-table>
@@ -274,35 +269,32 @@ onMounted(()=>{
         >
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="用户名称" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="名称" prop="name">
+                <el-input placeholder="名称" v-model="ruleForm.name" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="手机号码" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="地址">
+                <el-input placeholder="地址" v-model="ruleForm.addr" />
               </el-form-item>
             </el-col>
+           
             <el-col :span="12">
-              <el-form-item label="身份证号" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="位置">
+                <el-input placeholder="位置" v-model="ruleForm.location" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="用户角色" prop="name">
-                <el-input v-model="ruleForm.name" />
+              <el-form-item label="所属客运站">
+                <el-input placeholder="所属客运站" v-model="ruleForm.kyzId" />
               </el-form-item>
             </el-col>
-            <el-col :span="24">
-              <el-form-item label="用户状态" prop="name">
-                <el-input v-model="ruleForm.name" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="备注信息" prop="name">
-                <el-input v-model="ruleForm.name" type="textarea" />
+            <el-col :span="12">
+              <el-form-item label="备注">
+                <el-input placeholder="备注" v-model="ruleForm.remark" />
               </el-form-item>
             </el-col>
+          
           </el-row>