更新页面

src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/index.vue

@@ -26,7 +26,12 @@
         </MyTable>
       </div>
       <div style="background:#fff" class="mt10 pl10 pr10 pb10 pt10" >
-        <div class="title">人员信息</div>
+        <div class="flex align-center">
+          <div class="title mr20">人员信息</div>
+          <div class="mb13">
+            <el-button size="small" v-for="it in btnsList" :key="it"  @click="chooseType(it)"> {{ it }} </el-button>
+          </div>
+        </div>
         <MyTable
           :tableData="pageData.tableDataPeople"
           :tableColumn="pageData.tableColumnPeople"
@@ -34,7 +39,7 @@
           :key="pageData.keyCount"
           :tableConfiger="pageData.tableConfiger1"
           :controlsWidth="pageData.controlsWidth"
-          @chooseData="chooseData"
+          @chooseData="chooseDataBottom"
         >
           <template #ryXm="{ row }">
             <div>姓名：{{ row.ryXm }}  &nbsp;；</div>
@@ -74,9 +79,12 @@
         </li>
       </ul>
     </div>
+    <Model v-model="isShow" :type="chooselx" :ids="ids" @change="getList" :dic="{D_BZ_SF}"></Model>
   </div>
 </template>
 <script setup>
+import { ElMessage,ElMessageBox } from "element-plus";
+import Model from "./model.vue";
 import { qcckGet } from "@/api/qcckApi.js";
 import { ref, reactive, onMounted, getCurrentInstance } from "vue";
 import MyTable from "@/components/aboutTable/MyTable.vue";
@@ -84,7 +92,13 @@ import Pages from "@/components/aboutTable/Pages.vue";
 import FormMessage from "@/components/aboutTable/FormMessage.vue";
 import { qcckPost } from "@/api/qcckApi.js";
 const { proxy } = getCurrentInstance();
-const { D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } = proxy.$dict("D_GS_RQFJ_FXDJ","D_GS_RQFJ_FXLB"); //获取字典数据
+const {D_BZ_SF, D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } = proxy.$dict("D_BZ_SF","D_GS_RQFJ_FXDJ","D_GS_RQFJ_FXLB"); //获取字典数据
+const btnsList = reactive(['布控','是否关注','移交管控'])
+
+const chooselx = ref('')
+const isShow = ref(false)
+const ids = ref([])
+
 const pageData = reactive({
   tableData: [
     {
@@ -137,7 +151,7 @@ const pageData = reactive({
   },
   tableConfiger1: {
     rowHieght: 61,
-    showSelectType: "null",
+    showSelectType: "checkBox",
     loading: false,
     haveControls:false
   },
@@ -260,6 +274,32 @@ const tabHeightFn = () => {
   };
 };
 
+// 选择数据
+const chooseDataBottom = (val) =>{
+  if(Array.isArray(val)) ids.value = val.map(item=>item.id);
+}
+
+const chooseType = (val)=>{
+  chooselx.value = val;
+  switch(val){
+    case '布控':
+      if(ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
+       ElMessageBox.confirm('是否确定布控?','Warning',{ confirmButtonText: 'OK', cancelButtonText: 'Cancel', type: 'warning' }).then(() => {
+          let params = { ids:ids.value, sfbk:'1' }
+          qcckPost(params,'/mosty-gsxt/tbGsxtRqfjRy/updateBySfbkpz').then(res=>{
+            ElMessage.success("成功");
+            getList()
+          })
+        }).catch(() => {
+          ElMessage({ type: 'info', message: '取消' })
+        })
+      break;
+    case '是否关注':
+    case '移交管控':
+      break;
+  }
+}
+
 onMounted(()=>{
   tabHeightFn();
   getList()

src/views/backOfficeSystem/ExcavationResearch/ZdryFjyp/model.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog v-model="modelValue" title="等级切换" width="500px" @close="handleClose">
+    <el-form :model="listQuery" ref="formValidate" :rules="rules">
+        <el-form-item prop="sfbk" label="是否布控" v-if="props.type == '布控'">
+            <MOSTY.Select filterable v-model="listQuery.sfbk" :dictEnum="bkList" width="100%" clearable placeholder="请选择是否布控"/>
+        </el-form-item>
+    </el-form>
+    <template #footer>
+        <div class="tc">
+            <el-button @click="handleClose">取消</el-button>
+            <el-button type="primary" @click="submitForm">确定</el-button>
+        </div>
+    </template>
+</el-dialog>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { qcckPost } from "@/api/qcckApi.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ref ,defineProps,defineEmits, reactive} from 'vue';
+const props = defineProps({
+    modelValue:{
+        type:Boolean,
+        default:false
+    },
+    ids:{
+        type:Array,
+        default:[]
+    },
+    type:String,
+    dic:Object
+})
+const bkList = reactive([
+    { label:'撤销申请布控',value:'0' },
+    { label:'申请布控',value:'1' },
+])
+const emits = defineEmits(["update:modelValue",'getDepValue']);
+const formValidate = ref()
+const rules = reactive({
+    sfbk: [{ required: true, message: "请选择是布控", trigger: "change" }],
+})
+const listQuery = ref({});
+
+const submitForm  = () =>{
+    formValidate.value.validate((valid) => {
+        if (!valid) return false;
+        let params = { ids:props.ids, ...listQuery.value  }
+        let url = ''
+        if( props.type == '布控') url = '/mosty-gsxt/tbGsxtRqfjRy/updateBySfbkpz'
+        qcckPost(params,url).then(res=>{
+            ElMessage.success("成功");
+            emits('update:modelValue',false)
+            emits('change')
+        })
+    })
+}
+
+const handleClose = () =>{
+    emits('update:modelValue',false)
+    formValidate.value.resetFields();
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>