大屏和环林卡口管理

src/views/backOfficeSystem/peopleManag/checkpoint/components/editAddForm.vue

@@ -3,71 +3,177 @@
     <div class="head_box">
       <span class="title">{{ pageInfo[pageType].title }}</span>
       <div>
-        <el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          v-if="['add', 'edit'].includes(pageType)"
+          @click="_onSave"
+          >保存</el-button
+        >
         <el-button size="small" @click="close">关闭</el-button>
       </div>
     </div>
     <div class="cntinfo">
-      <el-form ref="formRef" :model="listQuery" :rules="rules" :inline="true" label-position="top">
+      <el-form
+        ref="formRef"
+        :model="listQuery"
+        :rules="rules"
+        :inline="true"
+        label-position="top"
+      >
         <el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
-          <MOSTY.Department width="100%" clearable :disabled="forbidden" v-model="listQuery.ssbmdm"
-            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'" />
+          <MOSTY.Department
+            width="100%"
+            clearable
+            :disabled="forbidden"
+            v-model="listQuery.ssbmdm"
+            :placeholder="listQuery.ssbm ? listQuery.ssbm : '请选择所属部门'"
+          />
         </el-form-item>
         <el-form-item style="width: 40%" prop="jczmc" label="环林卡口名称">
-          <el-input :disabled="forbidden" v-model="listQuery.jczmc" placeholder="请输入环林卡口名称" style="width: 100%"
-            clearable />
+          <el-input
+            :disabled="forbidden"
+            v-model="listQuery.jczmc"
+            placeholder="请输入环林卡口名称"
+            style="width: 100%"
+            clearable
+          />
         </el-form-item>
 
         <el-form-item style="width: 40%" prop="zqlx" label="执勤类型">
-          <el-select :disabled="forbidden" v-model="listQuery.zqlx" placeholder="请选择执勤类型">
-            <el-option v-for="dict in dict.D_BZ_ZQLX" :key="dict.value" :value="dict.value"
-              :label="dict.label"></el-option>
+          <el-select
+            :disabled="forbidden"
+            v-model="listQuery.zqlx"
+            placeholder="请选择执勤类型"
+          >
+            <el-option
+              v-for="dict in dict.D_BZ_ZQLX"
+              :key="dict.value"
+              :value="dict.value"
+              :label="dict.label"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="jczlx" label="环林卡口类型">
-          <el-select :disabled="forbidden" v-model="listQuery.jczlx" placeholder="请选择环林卡口类型">
-            <el-option v-for="dict in dict.D_BZ_JCZLX" :key="dict.value" :value="dict.value"
-              :label="dict.label"></el-option>
+          <el-select
+            :disabled="forbidden"
+            v-model="listQuery.jczlx"
+            placeholder="请选择环林卡口类型"
+          >
+            <el-option
+              v-for="dict in dict.D_BZ_JCZLX"
+              :key="dict.value"
+              :value="dict.value"
+              :label="dict.label"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item style="width: 40%" prop="rwlx" label="任务类型">
+          <el-select
+            :disabled="forbidden"
+            v-model="listQuery.rwlx"
+            placeholder="请选择环林卡口类型"
+          >
+            <el-option
+              v-for="dict in dict.D_BZ_JCZLX"
+              :key="dict.value"
+              :value="dict.value"
+              :label="dict.label"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="jczjb" label="环林卡口级别">
-          <el-select :disabled="forbidden" v-model="listQuery.jczjb" placeholder="请选择环林卡口级别">
-            <el-option v-for="dict in dict.D_BZ_JCZJB" :key="dict.value" :value="dict.value"
-              :label="dict.label"></el-option>
+          <el-select
+            :disabled="forbidden"
+            v-model="listQuery.jczjb"
+            placeholder="请选择环林卡口级别"
+          >
+            <el-option
+              v-for="dict in dict.D_BZ_JCZJB"
+              :key="dict.value"
+              :value="dict.value"
+              :label="dict.label"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="fzr" label="负责人">
-          <el-input :disabled="forbidden" v-model="listQuery.fzr" placeholder="请输入负责人" style="width: 100%" clearable />
+          <div class="ipt" @click="openChooseUser('fzr')">
+            <el-tag
+              v-for="(item, idx) in fzrData"
+              :key="item.id"
+              closable
+              @close="handleCloseFzr(item, idx)"
+              >{{ item.userName }}</el-tag
+            >
+          </div>
         </el-form-item>
-        <el-form-item style="width: 40%" prop="lxdh" label="联系电话">
-          <el-input :disabled="forbidden" v-model="listQuery.lxdh" placeholder="请输入联系电话" style="width: 100%"
-            clearable />
+        <el-form-item style="width: 40%" prop="fzr" label="临时执勤人员">
+          <div class="ipt" @click="openChooseUser('lszq')">
+            <el-tag
+              v-for="(item, idx) in lszqData"
+              :key="item.id"
+              closable
+              @close="handleCloseLszq(item, idx)"
+              >{{ item.userName }}</el-tag
+            >
+          </div>
         </el-form-item>
         <el-form-item style="width: 40%" prop="dllx" label="道路类型">
-          <el-select :disabled="forbidden" v-model="listQuery.dllx" placeholder="请选择道路类型">
-            <el-option v-for="dict in dict.D_BZ_DLLX" :key="dict.value" :value="dict.value"
-              :label="dict.label"></el-option>
+          <el-select
+            :disabled="forbidden"
+            v-model="listQuery.dllx"
+            placeholder="请选择道路类型"
+          >
+            <el-option
+              v-for="dict in dict.D_BZ_DLLX"
+              :key="dict.value"
+              :value="dict.value"
+              :label="dict.label"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item style="width: 40%" prop="xxdz" label="环林卡口地址">
-          <el-input :disabled="forbidden" v-model="listQuery.xxdz" placeholder="请输入环林卡口地址" style="width: 100%"
-            clearable />
+          <el-input
+            :disabled="forbidden"
+            v-model="listQuery.xxdz"
+            placeholder="请输入环林卡口地址"
+            style="width: 100%"
+            clearable
+          />
         </el-form-item>
-        <el-form-item label="示意图(最多3张)" prop="fjid" style="width: 40%">
-          <MOSTY.Upload :disableds="forbidden" :isImg="true" width="100%" :limit="3" v-model="listQuery.fjid">
-          </MOSTY.Upload>
-        </el-form-item>
-        <el-form-item label="全景图(正面、侧面、俯视共3张)" prop="qjfjid" style="width: 48%">
-          <MOSTY.Upload :disableds="forbidden" width="100%" :isImg="true" :limit="3" v-model="listQuery.qjfjid">
+        <el-form-item
+          label="全景图(前方、后方、临时卡点图片)"
+          prop="qjfjid"
+          style="width: 48%"
+        >
+          <MOSTY.Upload
+            :disableds="forbidden"
+            width="100%"
+            :isImg="true"
+            :limit="3"
+            v-model="listQuery.qjfjid"
+          >
           </MOSTY.Upload>
         </el-form-item>
         <el-form-item style="width: 85%" prop="jd" label="坐标位置">
           <div class="latlng flex">
-            <el-input :disabled="false" v-model="listQuery.jd" clearable placeholder="请选择坐标"
-              style="width: 42%"></el-input>
-            <el-input :disabled="false" v-model="listQuery.wd" clearable placeholder="请选择坐标"
-              style="width: 42%; margin-left: 1%"></el-input>
-            <el-button @click="selectLocation" :disabled="forbidden">选择定位</el-button>
+            <el-input
+              :disabled="false"
+              v-model="listQuery.jd"
+              clearable
+              placeholder="请选择坐标"
+              style="width: 42%"
+            ></el-input>
+            <el-input
+              :disabled="false"
+              v-model="listQuery.wd"
+              clearable
+              placeholder="请选择坐标"
+              style="width: 42%; margin-left: 1%"
+            ></el-input>
+            <el-button @click="selectLocation" :disabled="forbidden"
+              >选择定位</el-button
+            >
           </div>
         </el-form-item>
         <el-form-item style="width: 100%">
@@ -77,10 +183,16 @@
         </el-form-item>
       </el-form>
     </div>
+    <ChooseUser
+      v-model="chooseUserVisible"
+      @choosedUsers="saveUsers"
+      :Single="false"
+    ></ChooseUser>
   </div>
 </template>
 
 <script setup>
+import ChooseUser from "@/components/MyComponents/ChooseUser";
 import { ref, reactive, onMounted } from "vue";
 import { JczaddJcz, JczupdateJcz } from "@/api/mosty-jcz.js";
 import * as MOSTY from "@/components/MyComponents/index";
@@ -90,9 +202,11 @@ import { ElMessage } from "element-plus";
 const props = defineProps({
   dict: {
     type: Object,
-    default: () => { }
+    default: () => {}
   }
 });
+const chooseUserType = ref(); //选择民警的类型
+const chooseUserVisible = ref(false);
 const rules = reactive({
   jczmc: [
     {
@@ -113,7 +227,8 @@ const rules = reactive({
       message: "请选择环林卡口类型",
       trigger: "change"
     }
-  ], jczjb: [
+  ],
+  jczjb: [
     {
       required: true,
       message: "请选择环林卡口级别",
@@ -133,6 +248,8 @@ const rules = reactive({
     }
   ]
 });
+const fzrData = ref();
+const lszqData = ref();
 const formRef = ref(null);
 const emit = defineEmits(["getjczgetXfllList"]);
 const dialogForm = ref(false);
@@ -160,7 +277,7 @@ onMounted(() => {
   });
 });
 let pageType = ref("add");
-const forbidden = ref(false)
+const forbidden = ref(false);
 // 初始化数据
 const init = (type, row) => {
   pageType.value = type;
@@ -170,13 +287,17 @@ const init = (type, row) => {
   if (type == "edit" || type == "detail") {
     listQuery.value = { ...row };
     if (type == "detail") {
-      forbidden.value = true
+      forbidden.value = true;
     }
     chackLat();
   } else {
     listQuery.value = {};
   }
 };
+const openChooseUser = (val) => {
+  chooseUserType.value = val;
+  chooseUserVisible.value = true;
+};
 //保存
 const _onSave = () => {
   if (!formRef) return;
@@ -209,13 +330,27 @@ const selectLocation = () => {
     isclear: true
   });
 };
+//选择民警
+const saveUsers = (users) => {
+  if (chooseUserType.value == "fzr") {
+    fzrData.value = users;
+  } else {
+    lszqData.value = users;
+  }
+};
+const handleCloseFzr = (val, idx) => {
+  fzrData.value.splice(idx, 1);
+};
+const handleCloseLszq = (val, idx) => {
+  lszqData.value.splice(idx, 1);
+};
 //获取经纬度
 const chackLat = () => {
   const { jd, wd } = listQuery.value;
   let icon = require("@/assets/images/bi/gzy.png");
   emitter.emit("deletePointArea", "jczMap_Gzy");
 
-  if (listQuery.value.zqlx == '2') {
+  if (listQuery.value.zqlx == "2") {
     icon = require("@/assets/images/bi/gzy.png");
   } else {
     icon = require("@/assets/images/z.png");
@@ -236,12 +371,11 @@ const chackLat = () => {
 // 初始化时展示地图图标
 const mapIcon = (val) => {
   console.log(val);
-
-}
+};
 //页面关闭
 const close = () => {
   dialogForm.value = false;
-  forbidden.value = false
+  forbidden.value = false;
   listQuery.value = {};
 };
 // 表格高度计算
@@ -298,12 +432,12 @@ defineExpose({ init });
       width: 100%;
 
       // height: 96px;
-      >.el-form--inline {
+      > .el-form--inline {
         display: block;
         width: 100%;
         padding: 0;
 
-        >.el-form-item--default {
+        > .el-form-item--default {
           width: 31%;
         }
       }
@@ -354,4 +488,11 @@ defineExpose({ init });
   box-sizing: border-box;
   background: #000;
 }
+.ipt {
+  border: 1px solid #e9e9e9;
+  width: 100%;
+  line-height: 32px;
+  height: 32px;
+  border-radius: 4px;
+}
 </style>