ba_web/src/views/backOfficeSystem/patrolManagement/task/components/editAddForm.vue

<!--
 * @Author: your name
 * @Date: 2024-01-25 16:21:46
 * @LastEditTime: 2024-01-26 10:10:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
-->
<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}</span>
      <div>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="submit"
          v-show="!disabledFoem"
          >保存</el-button
        >
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <!--  -->
    <el-form
      :inline="true"
      ref="elform"
      :model="listQuery"
      :rules="rules"
      :disabled="disabledFoem"
      label-position="top"
    >
      <el-form-item prop="ssbmdm" label="单位归属">
        <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
      </el-form-item>
      <el-form-item prop="xflx" label="走访类型">
        <el-cascader
          v-model="listQuery.xflx"
          @change="changeca"
          :props="xflxprops"
          :show-all-levels="false"
          :options="props.dic.D_BZ_XFLX"
          :placeholder="'请选择走访类型'"
        />
      </el-form-item>

      <el-form-item prop="xfzzXm" label="巡访组长">
        <el-input
          @click="chooseUserVisible = true"
          v-model="listQuery.xfzzXm"
          placeholder="请选择组长"
        ></el-input>
      </el-form-item>
      <el-form-item prop="xfzzSfzh" label="巡访组长身份证号">
        <el-input
          v-model="listQuery.xfzzSfzh"
          placeholder="请选择巡访组长身份证号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="lxdh" label="巡访时间">
        <el-date-picker
          v-model="listQuery.xfsj"
          type="datetime"
          placeholder="请选择巡访时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item  v-show="disabledFoem"  label="寻访对象">
        <el-input v-model="xfdx"></el-input>
      </el-form-item>
      <!-- 商铺 -->
      <div
        style="width: 100%"
        class="formline"
        v-if="listQuery.xflx == '2201000'"
      >
        <el-form-item prop="fzrxm" label="商铺负责人" class="iptwidth">
          <el-input
            v-model="listQuery.fzrxm"
            placeholder="请输入商铺负责人"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fzrdh" label="负责人联系方式" class="iptwidth">
          <el-input
            v-model="listQuery.fzrdh"
            placeholder="请输入负责人联系方式"
          ></el-input>
        </el-form-item>
      </div>

      <!-- 群众 -->
      <div
        style="width: 100%"
        class="formline"
        v-if="listQuery.xflx == '2203000'"
      >
        <el-form-item prop="qzxm" label="姓名" class="iptwidth">
          <el-input
            v-model="listQuery.qzxm"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="qzlxfs" label="联系方式" class="iptwidth">
          <el-input
            v-model="listQuery.qzlxfs"
            placeholder="请输入联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item prop="xfdz" label="地址" class="iptwidth">
          <el-input
            v-model="listQuery.xfdz"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
      </div>
      <!-- 小区 -->
      <div
        style="width: 100%"
        class="formline"
        v-if="listQuery.xflx == '2202000' || abshow"
      >
        <el-form-item prop="fzrxm" label="小区物业负责人" class="iptwidth">
          <el-input
            v-model="listQuery.fzrxm"
            placeholder="请输入小区物业负责人"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fzrdh" label="负责人联系方式" class="iptwidth">
          <el-input
            v-model="listQuery.fzrdh"
            placeholder="请输入负责人联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item prop="abfwly" label="安保服务来源" class="iptwidth">
          <el-input
            v-model="listQuery.abfwly"
            placeholder="请输入安保服务来源"
          ></el-input>
        </el-form-item>
        <el-form-item prop="abfzrxm" label="安保负责人姓名" class="abfzrxm">
          <el-input
            v-model="listQuery.abfzrxm"
            placeholder="请输入安保负责人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="abfzrdh"
          label="安保负责人联系方式"
          class="iptwidth"
        >
          <el-input
            v-model="listQuery.abfzrdh"
            placeholder="请输入安保负责人联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item prop="abrs" label="保安人数" class="iptwidth">
          <el-input-number
            v-model="listQuery.abrs"
            :min="0"
            placeholder="请输入保安人数"
          ></el-input-number>
        </el-form-item>
      </div>
      <el-form-item prop="xfzy" label="巡访组员" style="width: 100%">
        <div class="ipt" @click="chooseZY">
          <span
            v-show="listQuery.xfzy.length == 0"
            style="color: #e5e5e5; padding-left: 10px"
            >请选择组员</span
          >
          <el-tag
            v-for="(tag, index) in listQuery.xfzy"
            :key="tag.id"
            :closable="!disabledFoem"
            :type="tag.type"
            @close.stop="handleClose(index)"
          >
            {{ tag.xm }}
          </el-tag>
        </div>
      </el-form-item>
      <div
        v-if="listQuery.xflx && (show || listQuery.xflx == '1200000')"
        style="width: 100%"
      >
        <el-form-item prop="xfgznr" style="width: 100%">
          <template #label
            >巡访工作内容
            <el-button type="pramary" @click="openMb('05')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.xfgznr"
            placeholder="请输入巡访工作内容"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item prop="sq" style="width: 100%">
          <template #label
            >社情（风险隐患线索信息）
            <el-button type="pramary" @click="openMb('06')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.sq"
            placeholder="请输入社情（风险隐患线索信息）"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item prop="my" style="width: 100%">
          <template #label
            >民意（人民群众意见建议）
            <el-button type="pramary" @click="openMb('07')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.my"
            placeholder="请输入民意（人民群众意见建议）"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item prop="gzcs" style="width: 100%">
          <template #label
            >工作措施或落实情况
            <el-button type="pramary" @click="openMb('08')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.gzcs"
            placeholder="请输入工作措施或落实情况"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </div>

      <div v-else style="width: 100%">
        <el-form-item prop="xtjlnr" style="width: 100%">
          <template #label
            >座谈交流内容
            <el-button type="pramary" @click="openMb('01')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.xtjlnr"
            placeholder="请输入座谈交流内容"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item prop="xtqdcx" style="width: 100%">
          <template #label
            >座谈情况和取得成效
            <el-button type="pramary" @click="openMb('02')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.xtqdcx"
            placeholder="请输入座谈情况和取得成效"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item prop="xbgzjh" style="width: 100%">
          <template #label
            >下步工作计划
            <el-button type="pramary" @click="openMb('03')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.xbgzjh"
            placeholder="请输入下步工作计划"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item prop="qt" style="width: 100%">
          <template #label
            >其它<el-button type="pramary" @click="openMb('04')"
              >选择模板</el-button
            ></template
          >
          <el-input
            v-model="listQuery.qt"
            placeholder="请输入其它"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </div>

      <el-form-item prop="xfdw" style="width: 100%">
        <template #label
          >走访单位
          <el-button type="pramary" @click="showDialog = true"
            >选择模板</el-button
          ></template
        >
        <el-table :data="listQuery.xfdw" border style="width: 100%">
          <el-table-column
            type="index"
            align="center"
            width="60px"
            label="序号"
          />
          <el-table-column prop="ssbm" align="center" label="单位名称" />
          <el-table-column prop="dwfzrxm" align="center" label="负责人姓名" />
          <el-table-column prop="xqldzw" align="center" label="负责人职务" />
          <el-table-column
            prop="dwdz"
            align="center"
            label="地址"
            show-overflow-tooltip
          />
        </el-table>
      </el-form-item>
      <el-form-item label="巡访照片" style="width: 100%">
        <el-upload
          action="/mosty-base/minio/image/upload/id"
          v-model:file-list="fileList"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="upImg"
        >
          <el-icon><Plus></Plus></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="巡访地址" style="width: 100%">
        <div class="mapBox"><GdMap /></div>
      </el-form-item>
    </el-form>
    <ChooseUser
      v-if="chooseUserVisible"
      v-model="chooseUserVisible"
      titleValue="选择负责人"
      :roleIds="hasChooseFzr"
      @choosedUsers="hanlderChoose"
    ></ChooseUser>
    <!-- 下发单位 -->
    <XfdwDialog
      v-if="showDialog"
      v-model="showDialog"
      @choosedList="choosedList"
      :roleIds="chooseIds"
    />
    <!-- 走访内容 -->
    <XfnrDialog
      v-if="showNrDialog"
      :Single="true"
      v-model="showNrDialog"
      @choosedList="choosedNrList"
      :roleIds="chooseIds"
      :type="mblx"
    />
    <!-- 选择人员 -->
    <Ryload
      v-if="peoDialog"
      v-model:modelValue="peoDialog"
      @choosedUsers="hanlderChooseRy"
      :roleIds="roleIdsPeo"
    />
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import ChooseUser from "@/components/MyComponents/ChooseUser";
import XfdwDialog from "./xfdwDialog.vue";
import XfnrDialog from "./xfnrDialog.vue";
import Ryload from "@/components/MyComponents/ChooseJz/ryload.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
import { IdCard } from "@/utils/validate.js";
import Person from "@/assets/images/default_male.png";
import GdMap from "@/components/GdMap/index.vue";
import {
  ref,
  defineExpose,
  reactive,
  defineProps,
  defineEmits,
  getCurrentInstance
} from "vue";
const props = defineProps({
  dic: { type: Object, default: {} }
});
const { proxy } = getCurrentInstance();
const emits = defineEmits(["updateDate"]);
const peoDialog = ref(false);
const mblx = ref("");
const showDialog = ref(false); //弹窗
const chooseIds = ref([]); //ids
const showNrDialog = ref(false);
const chooseNrIds = ref([]); //ids
const xflxprops = ref({
  label: "zdmc",
  value: "dm",
  children: "itemList"
});
const chooseUserVisible = ref(false); //负责人弹窗
const hasChooseFzr = ref([]); //已经选胡负责人
const hasChooseMj = ref([]); //已经选胡民警
import people from "@/assets/images/peo.png";
const title = ref("新增巡访任务管理");
const disabledFoem = ref(false); //表单禁用
const dialogForm = ref(false); //弹窗
const listQuery = ref({
  sfzh: "",
  xfdw: [],
  xfzy: []
}); //表单
const loading = ref(false);
const elform = ref();
const rules = reactive({
  ssbmdm: [{ required: true, message: "请选择单位归属", trigger: "change" }],
  xflx: [{ required: true, message: "请选择走访类型", trigger: "change" }],
  xfzzXm: [
    { required: true, message: "请选择组长", trigger: ["change", "blur"] }
  ],
  xfzy: [{ required: true, message: "请选择组员", trigger: ["change", "blur"] }]
});
const roleIdsPeo = ref([]);

const imgList = ref([]);
const urlImg = ref("/mosty-base/minio/image/download/");
const fileList = ref([]);

// 初始化数据
const init = (type, id) => {
  dialogForm.value = true;
  disabledFoem.value = type == "detail" ? true : false;
  if (id) {
    title.value = type == "edit" ? "修改巡访任务管理" : "巡访任务管理详情";
    getDataById(id); //根据id查询详情
  } else {
    title.value = "新增巡访任务管理";
  }
};
// 根据id查询详情
const xfdx = ref();
const getDataById = (id) => {
  qcckGet({}, "/mosty-jmxf/tbJcglXf/" + id).then((res) => {
    listQuery.value = res;
    listQuery.value.xfdw = res.xfdw ? JSON.parse(res.xfdw) : [];
    console.log( listQuery.value.xfdw);
    if (listQuery.value.xfdw.length > 0) {
      xfdx.value = listQuery.value.xfdw[0].xfbmmc;
    }
    listQuery.value.xfzy = res.xfzy ? JSON.parse(res.xfzy) : [];
    roleIdsPeo.value = listQuery.value.xfzy.map((item) => {
      return item.id;
    });
    emitter.emit("deletePointArea", "zfry");
    let ids = res.xfzp.split(",");
    fileList.value = [];
    ids.forEach((element) => {
      let obj = { name: element, url: urlImg.value + element };
      fileList.value.push(obj);
    });
    if (listQuery.value.xfdw.length == 0) return false;
    let list = listQuery.value.xfdw;
    emitter.emit("setMapCenter", {
      location: [list[0].jd, list[0].wd],
      zoomLevel: 10
    });
    emitter.emit("addPointArea", {
      coords: list,
      icon: require("@/assets/point/jz.png"),
      flag: "zfry"
    });
  });
};
const show = ref(true);
const abshow = ref(false);
function changeca(val) {
  console.log(val);
  if (val.length > 2) {
    console.log();
    const str = val[2].slice(0, 2);
    if (str == 22) {
      show.value = true;
      abshow.value = false;
    } else {
      show.value = false;
      abshow.value = true;
    }
    listQuery.value.xflx = val[2];
  } else {
    abshow.value = false;
    if (val[1] == "1200000") {
      show.value = true;
    } else {
      show.value = false;
    }
    listQuery.value.xflx = val[1];
  }
}
//打开内容模板
function openMb(type) {
  mblx.value = type;
  showNrDialog.value = true;
}
// 移除
function handleRemove(val) {
  imgList.value = imgList.value.filter((item) => {
    return item.uuid != val.uuid;
  });
  fileList.value = fileList.value.filter((item) => {
    return item.name != val.name;
  });
}
// 上传
function upImg(row, file) {
  file.data = row.data;
  imgList.value.push(file);
}

// 选择人员
const hanlderChooseRy = (val) => {
  listQuery.value.xfzy = val;
  roleIdsPeo.value = val.map((item) => {
    return item.id;
  });
};
// 删除
const handleClose = (index) => {
  listQuery.value.xfzy.splice(index, 1);
  roleIdsPeo.value.splice(index, 1);
};
// 选择组员
const chooseZY = () => {
  if (disabledFoem.value) return false;
  peoDialog.value = true;
};

//选择用户负责人
const hanlderChoose = (users) => {
  const user = users[0];
  hasChooseFzr.value = [user.id];
  listQuery.value.xfzzXm = user.userName;
  listQuery.value.xfzzSfzh = user.idEntityCard;
};
// 选择人员
const choosedList = (val) => {
  emitter.emit("deletePointArea", "zfry");
  listQuery.value.xfdw = val;
  chooseIds.value = val.map((item) => {
    return item.id;
  });
  showDialog.value = false;
  let list = val.filter((item) => {
    return item.jd && item.wd;
  });
  if (list.length == 0) return false;
  emitter.emit("setMapCenter", {
    location: [list[0].jd, list[0].wd],
    zoomLevel: 10
  });
  emitter.emit("addPointArea", {
    coords: list,
    icon: require("@/assets/point/jz.png"),
    flag: "zfry"
  });
};
// 选择内容
const choosedNrList = (val) => {
  showNrDialog.value = false;
  chooseNrIds.value = val.map((item) => {
    return item.id;
  });
  switch (mblx.value) {
    case "01":
      listQuery.value.xtjlnr = val[0].nr;
      break;
    case "02":
      listQuery.value.xtqdcx = val[0].nr;
      break;
    case "03":
      listQuery.value.xbgzjh = val[0].nr;
      break;
    case "04":
      listQuery.value.qt = val[0].nr;
      break;
    case "05":
      listQuery.value.xfgznr = val[0].nr;
      break;
    case "06":
      listQuery.value.sq = val[0].nr;
      break;
    case "07":
      listQuery.value.my = val[0].nr;
      break;
    case "08":
      listQuery.value.gzcs = val[0].nr;
      break;
    default:
      break;
  }
};

// 提交
const submit = () => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    let pramas = { ...listQuery.value };
    pramas.xfzy = JSON.stringify(pramas.xfzy);
    pramas.xfdw = JSON.stringify(pramas.xfdw);
    pramas.zfxl = pramas.xflx;
    let ids1 = imgList.value.map((item) => {
      return item.data;
    });
    let ids2 = fileList.value.map((item) => {
      return item.name;
    });
    let ids = [...ids1, ...ids2];
    pramas.xfzp = ids.join(",");
    if (title.value == "新增巡访任务管理") {
      qcckPost(pramas, "/mosty-jmxf/tbJcglXf")
        .then((res) => {
          proxy.$message({ type: "success", message: "新增成功" });
          close();
          emits("updateDate");
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    } else {
      qcckPut(pramas, "/mosty-jmxf/tbJcglXf")
        .then((res) => {
          proxy.$message({ type: "success", message: "新增成功" });
          close();
          emits("updateDate");
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
};
// 关闭
const close = () => {
  listQuery.value = { xfdw: [], xfzy: [] };
  dialogForm.value = false;
  imgList.value = [];
  fileList.value = [];
};
defineExpose({ init });
</script>

<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.mapBox {
  width: 100%;
  height: 600px;
}
.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  position: relative;
  background: #001238;
}
.iptwidth {
  width: 100%;
}
.formline {
  flex-wrap: wrap;
  display: flex;
  // justify-content: space-around;
}
</style>