'保安项目提交'

src/components/MyComponents/AddressSelect/index.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="form-item-box zj-addressSelect-wrap" :style="{ width: width }">
+    <el-select :placeholder="placeholder" :clearable="true" v-model="value" popper-class="adderss-select"
+      @clear="handleClear">
+      <el-option value="1" style="display: none"></el-option>
+      <el-input v-if="filterable" v-model="filterText" style="margin-bottom: 5px; font-size: 12px"
+        :prefix-icon="Search" />
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane name="province" :label="province ? province : '请选择'">
+          <div class="citylist">
+            <ul>
+              <li @click="chooseProvince(item)" v-for="item in provinceList" :key="item.code"
+                :class="{ selected: provinceId == item.code }">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="city" v-if="cityList.length > 0" :label="city ? city : '请选择'">
+          <div class="citylist">
+            <ul>
+              <li @click="chooseCity(item)" v-for="item in cityList" :class="{ selected: cityId == item.code }"
+                :key="item.code">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="area" v-if="areaList.length > 0" :label="area ? area : '请选择'">
+          <div class="citylist">
+            <ul>
+              <li @click="chooseArea(item)" v-for="item in areaList" :key="item.code"
+                :class="{ selected: areaId == item.code }">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane name="street" v-if="streetList.length > 0" :label="street ? street : '请选择'">
+          <div class="citylist">
+            <ul>
+              <li @click="chooseStreet(item)" v-for="item in streetList" :key="item.code"
+                :class="{ selected: streetId == item.code }">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-select>
+    <!-- <el-icon class="errorIcon">
+      <circle-close-filled />
+    </el-icon>
+    <el-icon class="checkIcon">
+      <circle-check-filled />
+    </el-icon> -->
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { nextTick, ref, watch } from "vue";
+import { Search } from "@element-plus/icons-vue";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  placeholder: {
+    default: "选择地址",
+    type: String
+  },
+  filterable: {
+    default: false,
+    type: Boolean
+  },
+  address: {
+    default: () => [],
+    type: Array
+  },
+  defaultConf: {
+    type: Object,
+    default: () => ({
+      children: "",
+      label: "",
+      id: ""
+    })
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const filterText = ref("");
+const activeName = ref("province");
+const value = ref("");
+const valueId = ref([]);
+const province = ref("");
+const provinceId = ref("");
+const provinceList = ref([]);
+provinceList.value = require("@/constant/pca-code.json");
+const city = ref("");
+const cityId = ref("");
+const cityList = ref([]);
+const area = ref("");
+const areaId = ref("");
+const areaList = ref([]);
+const street = ref("");
+const streetId = ref("");
+const streetList = ref([]);
+const provinceListFilter = ref([]);
+provinceListFilter.value = require("@/constant/pca-code.json");
+const cityListFilter = ref([]);
+const areaListFilter = ref([]);
+const streetListFilter = ref([]);
+nextTick(() => {
+  if (props.address.length > 0) {
+    init(props.address);
+  }
+});
+watch(filterText, (val) => {
+  filterNode(val);
+});
+const handleClick = () => {
+  filterText.value = "";
+  filterNode("");
+};
+const filterNode = (val) => {
+  if (activeName.value === "province") {
+    if (val !== "") {
+      provinceList.value = provinceListFilter.value.filter(
+        (item) => item[props.defaultConf.label].indexOf(val) !== -1
+      );
+    } else {
+      provinceList.value = provinceListFilter.value;
+    }
+  } else if (activeName.value === "city") {
+    if (val !== "") {
+      cityList.value = cityListFilter.value.filter(
+        (item) => item[props.defaultConf.label].indexOf(val) !== -1
+      );
+    } else {
+      cityList.value = cityListFilter.value;
+    }
+  } else if (activeName.value === "area") {
+    if (val !== "") {
+      areaList.value = areaListFilter.value.filter(
+        (item) => item[props.defaultConf.label].indexOf(val) !== -1
+      );
+    } else {
+      areaList.value = areaListFilter.value;
+    }
+  } else if (activeName.value === "street") {
+    if (val !== "") {
+      streetList.value = streetListFilter.value.filter(
+        (item) => item[props.defaultConf.label].indexOf(val) !== -1
+      );
+    } else {
+      streetList.value = streetListFilter.value;
+    }
+  }
+};
+const chooseProvince = (e) => {
+  province.value = e[props.defaultConf.label];
+  provinceId.value = e[props.defaultConf.id];
+  value.value = province.value;
+  valueId.value = [provinceId.value];
+  emits("handleChange", valueId.value);
+  city.value = "";
+  cityId.value = "";
+  cityList.value = [];
+  areaList.value = [];
+  streetList.value = [];
+  filterText.value = "";
+  provinceList.value.forEach((el) => {
+    if (el[props.defaultConf.id] === e[props.defaultConf.id]) {
+      if (el[props.defaultConf.children]) {
+        activeName.value = "city";
+        cityList.value = el[props.defaultConf.children];
+        cityListFilter.value = el[props.defaultConf.children];
+      }
+    }
+  });
+};
+const chooseCity = (e) => {
+  city.value = e[props.defaultConf.label];
+  cityId.value = e[props.defaultConf.id];
+  area.value = "";
+  areaId.value = "";
+  areaList.value = [];
+  streetList.value = [];
+  filterText.value = "";
+  value.value = province.value + "/" + city.value;
+  valueId.value = [provinceId.value, cityId.value];
+  emits("handleChange", valueId.value);
+  cityList.value.forEach((el) => {
+    if (el[props.defaultConf.id] === e[props.defaultConf.id]) {
+      if (el[props.defaultConf.children]) {
+        activeName.value = "area";
+        areaList.value = el[props.defaultConf.children];
+        areaListFilter.value = el[props.defaultConf.children];
+      }
+    }
+  });
+};
+const chooseArea = (e) => {
+  area.value = e[props.defaultConf.label];
+  areaId.value = e[props.defaultConf.id];
+  street.value = "";
+  streetId.value = "";
+  streetList.value = [];
+  filterText.value = "";
+  value.value = province.value + "/" + city.value + "/" + area.value;
+  valueId.value = [provinceId.value, cityId.value, areaId.value];
+  emits("handleChange", valueId.value);
+  areaList.value.forEach((el) => {
+    if (el[props.defaultConf.id] === e[props.defaultConf.id]) {
+      if (el[props.defaultConf.children]) {
+        streetList.value = el[props.defaultConf.children];
+        activeName.value = "street";
+        streetListFilter.value = el[props.defaultConf.children];
+      }
+    }
+  });
+};
+const chooseStreet = (e) => {
+  street.value = e[props.defaultConf.label];
+  streetId.value = e[props.defaultConf.id];
+  value.value =
+    province.value + "/" + city.value + "/" + area.value + "/" + street.value;
+  valueId.value = [
+    provinceId.value,
+    cityId.value,
+    areaId.value,
+    streetId.value
+  ];
+  emits("handleChange", valueId.value);
+};
+const handleClear = () => {
+  activeName.value = "province";
+  value.value = "";
+  valueId.value = [];
+  province.value = "";
+  provinceId.value = "";
+  city.value = "";
+  cityId.value = "";
+  cityList.value = [];
+  area.value = "";
+  areaId.value = "";
+  areaList.value = [];
+  street.value = "";
+  streetId.value = "";
+  streetList.value = [];
+  cityListFilter.value = [];
+  areaListFilter.value = [];
+  streetListFilter.value = [];
+  filterText.value = "";
+  filterNode("");
+  emits("handleChange", []);
+};
+const treeValueFind = (tree, arr, newArr = []) => {
+  tree.forEach((el) => {
+    if (el[props.defaultConf.id] === arr) {
+      newArr.push(el);
+    }
+    if (el[props.defaultConf.children]) {
+      treeValueFind(el[props.defaultConf.children], arr, newArr);
+    }
+  });
+  return newArr;
+};
+const init = (data) => {
+  let obj1 = treeValueFind(provinceList.value, data[0])[0];
+  province.value = obj1[props.defaultConf.label];
+  provinceId.value = obj1[props.defaultConf.id];
+  cityList.value = obj1[props.defaultConf.children];
+  cityListFilter.value = obj1[props.defaultConf.children];
+  value.value = province.value;
+  if (data[1]) {
+    let obj2 = treeValueFind(provinceList.value, data[1])[0];
+    city.value = obj2[props.defaultConf.label];
+    cityId.value = obj2[props.defaultConf.id];
+    areaList.value = obj2[props.defaultConf.children];
+    areaListFilter.value = obj2[props.defaultConf.children];
+    value.value = province.value + "/" + city.value;
+  }
+  if (data[2]) {
+    let obj3 = treeValueFind(provinceList.value, data[2])[0];
+    area.value = obj3[props.defaultConf.label];
+    areaId.value = obj3[props.defaultConf.id];
+    streetList.value = obj3[props.defaultConf.children];
+    streetListFilter.value = obj3[props.defaultConf.children];
+    value.value = province.value + "/" + city.value + "/" + area.value;
+  }
+  if (data[3]) {
+    let obj4 = treeValueFind(provinceList.value, data[3])[0];
+    street.value = obj4[props.defaultConf.label];
+    streetId.value = obj4[props.defaultConf.id];
+    value.value =
+      province.value + "/" + city.value + "/" + area.value + "/" + street.value;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.zj-addressSelect-wrap {
+  ::v-deep .el-select {
+    width: 100%;
+  }
+}
+</style>

src/components/MyComponents/CarNumber/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="zj-carnumber-box form-item-box" :style="{ width: width }">
+    <el-select
+      :class="{ 'error-input': carProvinceError }"
+      class="carnumber-select"
+      v-model="editForm.carProvince"
+      clearable
+      :placeholder="placeholder"
+      @change="carProvinceSelect"
+      popper-class="carnumber-select"
+    >
+      <el-option
+        v-for="item in allKeyWord.province"
+        :key="item"
+        :label="item"
+        :value="item"
+      >
+      </el-option>
+    </el-select>
+
+    <el-popover placement="bottom" popper-class="alphabet-select-wrap" trigger="click">
+      <template #reference>
+        <el-input
+          :class="{ 'error-input': carAlphabetError }"
+          class="carnumber-input"
+          style="text-transform:uppercase; "
+          :maxlength="maxlength"
+          @input="inputNumber"
+          onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
+          @clear="clearCarAlphabet"
+          v-model="editForm.carAlphabet"
+          placeholder="请输入车牌号"
+        />
+      </template>
+
+      <div class="alphabet"   >
+        <ul>
+          <li
+            @click="chooseNumber(item)"
+            v-for="item in allKeyWord.alphabet"
+            :key="item"
+          >
+            {{ item }}
+          </li>
+        </ul>
+      </div>
+    </el-popover>
+    <div class="error-tips" v-if="showErrorTips">{{ errorTips }}</div>
+    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
+    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, reactive, nextTick } from "vue";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  //获取组件传值
+  carnumber: {
+    default: "",
+    type: String
+  },
+  nationOption: {
+    default: () => [],
+    type: Array
+  },
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const maxlength = 7;
+const showErrorTips = ref(false);
+const carProvinceError = ref(false);
+const carAlphabetError = ref(false);
+const errorTips = ref("");
+const editForm = reactive({
+  carProvince: "",
+  carAlphabet: ""
+});
+nextTick(() => {
+  if (props.carnumber) {
+    editForm.carProvince = props.carnumber.substr(0, 1);
+    editForm.carAlphabet = props.carnumber.slice(1);
+    numberList.value = editForm.carAlphabet.split("");
+  }
+});
+const carNumber = ref("");
+const numberList = ref([]);
+const allKeyWord = {
+  province: [
+    "京",
+    "津",
+    "沪",
+    "渝",
+    "川",
+    "新",
+    "藏",
+    "宁",
+    "贵",
+    "桂",
+    "云",
+    "黑",
+    "吉",
+    "辽",
+    "晋",
+    "翼",
+    "青",
+    "鲁",
+    "豫",
+    "苏",
+    "皖",
+    "浙",
+    "闽",
+    "赣",
+    "湘",
+    "鄂",
+    "琼",
+    "甘",
+    "陕",
+    "蒙",
+    "粤"
+    // '港',
+    // '澳',
+    // '台',
+    // '使',
+    // '领',
+    // '警',
+    // '学'
+  ],
+  alphabet: [
+    1,
+    2,
+    3,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    0,
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z"
+  ]
+};
+const carProvinceSelect = (data) => {
+  carNumber.value = editForm.carProvince + editForm.carAlphabet;
+  emits("handleChange", carNumber.value.toUpperCase());
+};
+const clearCarAlphabet = () => {
+  editForm.carAlphabet = "";
+  numberList.value = [];
+  emits("handleChange", "");
+};
+const inputNumber = () => {
+  carNumber.value = editForm.carProvince + editForm.carAlphabet;
+  emits("handleChange", carNumber.value.toUpperCase());
+};
+const chooseNumber = (e) => {
+  numberList.value = editForm.carAlphabet.split(",");
+  numberList.value.push(e);
+  editForm.carAlphabet = numberList.value.toString().replace(/,/g, "");
+  carNumber.value = editForm.carProvince + editForm.carAlphabet;
+  emits("handleChange", carNumber.value.toUpperCase());
+};
+</script>
+
+<style lang="scss" scoped>
+.zj-carnumber-box {
+  display: flex;
+  justify-content: flex-start;
+  ::v-deep .carnumber-select {
+    width: 88px !important;
+    .el-input {
+      width: 88px !important;
+      min-width: 88px !important;
+    }
+  }
+  .carnumber-input {
+    width: 100%;
+    ::v-deep .el-input__inner{
+      width: 100%;
+      text-transform: uppercase ;
+    }
+  }
+}
+</style>

src/components/MyComponents/ChooseIcon/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <!--选择图标-->
+  <div class="form-item-box choose-icon-zj" :style="{ width: width }">
+    <el-autocomplete v-bind="$attrs" v-model="modelValue" :fetch-suggestions="querySearch"
+      popper-class="choose-icon-zj-autocomplete" :placeholder="placeholder" @change="onInput" @select="handleSelect">
+      <template #prefix>
+        <SvgIcon :icon="modelValue"></SvgIcon>
+      </template>
+      <template #default="{ item }">
+        <SvgIcon :icon="item.link"></SvgIcon>
+        <div class="value">{{ item.value }}</div>
+      </template>
+    </el-autocomplete>
+    <!-- <el-icon class="errorIcon">
+      <circle-close-filled />
+    </el-icon>
+    <el-icon class="checkIcon">
+      <circle-check-filled />
+    </el-icon> -->
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, defineExpose, onMounted } from "vue";
+const props = defineProps({
+  placeholder: {
+    default: "请输入图标名称",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const links = ref([]);
+
+const querySearch = (queryString, cb) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value;
+  cb(results);
+};
+const createFilter = (queryString) => {
+  return (restaurant) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+
+const handleSelect = (item) => {
+  emits("update:modelValue", item.value);
+};
+
+const handleIconClick = (ev) => {
+};
+
+const loadAll = () => {
+  const svgRequire = require.context("@/icons/svg", false, /\.svg$/);
+  const re = svgRequire.keys().map((svgIcon) => {
+    const iconName = svgIcon.split("/")[1];
+    const prefixIconName = iconName.split(".")[0];
+    return { value: prefixIconName, link: prefixIconName };
+  });
+  return re;
+};
+const iconListShow = ref(false);
+const showIconList = () => {
+  iconListShow.value = true;
+};
+
+onMounted(() => {
+  links.value = loadAll();
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const onInput = (e) => {
+  emits("update:modelValue", e);
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/MyComponents/ChooseJz/FjLoad.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-dialog title="选择辅警" width="1400px" v-model="modelValue" :append-to-body="true" @close="closed">
+    <div v-if="modelValue">
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="姓名">
+          <el-input v-model="listQuery.xm" placeholder="请输入姓名" clearable />
+        </el-form-item>
+        <el-form-item label="身份证号码">
+          <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号码" clearable />
+        </el-form-item>
+        <el-form-item label="所属部门" v-if="showBm">
+          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
+        <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" :row-key="keyid"
+          border style="width: 100%" height="450">
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column label="序号" type="index" align="center" sortable width="80" />
+          <el-table-column sortable prop="xm" show-overflow-tooltip align="center" label="辅警姓名">
+          </el-table-column>
+          <el-table-column sortable prop="sfzh" show-overflow-tooltip align="center" label="身份证号码">
+          </el-table-column>
+          <el-table-column sortable prop="ssbm" label="所属部门" align="center"></el-table-column>
+          <el-table-column sortable prop="jh" label="警号" align="center"></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import { getTbJcglXfll } from "@/api/xfll";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },// 回显
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  showBm: {
+    type: Boolean,
+    default: true
+  },
+  ssbmdm: {
+    type: String,
+    default: ""
+  }
+});
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  fl: "02"
+});
+const keyid = (row) => {
+  return row.id;
+};
+const form = ref({});
+const tableData = ref([]);
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+onMounted(() => {
+  handleFilter();
+})
+
+// 分页
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+// 获取列表
+const getListData = async () => {
+  const params = { ...listQuery.value, ssbmdm: props.ssbmdm };
+  const res = await getTbJcglXfll(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item => {
+    if (props.roleIds.some(id => id == item.id)) {
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift()
+      multipleUserRef.value.toggleRowSelection(del_row, false)
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+};
+
+// 重置
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "02" };
+  getListData();
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value
+  let list = []
+  let listId = []
+  userList.forEach(val => {
+    if (listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/JyqxLoad.vue

@@ -0,0 +1,287 @@
+<template>
+  <div>
+    <el-dialog
+      title="选择常用装备"
+      width="1400px"
+      v-model="modelValue"
+      @close="closed"
+    >
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item label="器械类型">
+            <el-select
+              v-model="listQuery.scode"
+              class="m-2"
+              placeholder="请选择器械类型"
+            >
+              <el-option
+                v-for="item in D_BZ_JYQXFL"
+                :label="item.label"
+                :key="item.value"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属部门" v-if="showBm">
+            <MOSTY.Department
+              width="100%"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>
+          <el-form-item label="购置日期">
+            <el-date-picker
+              v-model="listQuery.cgrq"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              type="date"
+              unlink-panels
+              placeholder="请选择日期"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" style="margin-top: 0px">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            border
+            :row-key="keyid"
+            style="width: 100%"
+            height="450"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              :reserve-selection="true"
+            />
+            <el-table-column
+              type="index"
+              show-overflow-tooltip
+              align="center"
+              width="60px"
+              label="序号"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="ssbm"
+              label="所属部门"
+              width="200px"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              sortable
+              prop="scode"
+              show-overflow-tooltip
+              align="center"
+              label="器械类型"
+            >
+              <template #default="{ row }">
+                <dict-tag
+                  :options="D_BZ_JYQXFL"
+                  :value="row.scode"
+                  :tag="false"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="qxMc"
+              show-overflow-tooltip
+              align="center"
+              label="器械名称"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="qxbh"
+              show-overflow-tooltip
+              align="center"
+              label="器械型号"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="cgrq"
+              show-overflow-tooltip
+              label="生产日期"
+              align="center"
+              width="200px"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="qxPch"
+              show-overflow-tooltip
+              label="录入批次"
+              align="center"
+              width="200px"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageNo"
+            :page-sizes="[2, 5, 10, 20]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import {
+  defineProps,
+  watch,
+  ref,
+  onMounted,
+  nextTick,
+  getCurrentInstance
+} from "vue";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+const { proxy } = getCurrentInstance();
+const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },
+  showBm: {
+    type: Boolean,
+    default: true
+  },
+  ssbmdm: {
+    type: String,
+    default: ""
+  }
+});
+const total = ref(0);
+const listQuery = ref({
+  pageNo: 1,
+  pageSize: 20
+});
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+onMounted(() => {
+  handleFilter();
+});
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = {
+    pageNo: 1,
+    pageSize: 20
+  };
+  getListData();
+};
+const keyid = (row) => {
+  return row.id;
+};
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+  let list = []
+  let listId = []
+  userList.forEach(val=>{
+    if(listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageNo = currentPage;
+  getListData();
+};
+const getListData = async () => {
+  const params = listQuery.value;
+  const res = await qcckGet(params, "/mosty-jmxf/tpJcglJyqx/selectJyqx");
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser();
+};
+
+//列表回显
+function multipleUser(row) {
+  tableData.value.forEach(item=>{
+    if(props.roleIds.some(id=>id == item.id)){
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+
+const handleFilter = () => {
+  listQuery.value.pageNo = 1;
+  listQuery.ssbmdm = props.ssbmdm;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelectionUser.value = val;
+};
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === true) {
+      handleFilter();
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/JzLoad.vue

@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <el-dialog title="选择警组"  width="1400px" :model-value="modelValue" @close="closed">
+      <div v-if="modelValue">
+        <el-form :model="listQuery" :inline="true">
+          <el-form-item label="所属部门">
+            <MOSTY.Department
+              width="280px"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>
+          <el-form-item label="警组名称">
+            <el-input
+              v-model="listQuery.jzMc"
+              placeholder="请输入警组名称"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="负责人">
+            <el-input
+              v-model="listQuery.ddMjxm"
+              placeholder="请输入负责人"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            border
+            style="width: 100%"
+            :row-key="keyid"
+            height="450"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              :reserve-selection="true"
+            />
+            <el-table-column
+              label="序号"
+              type="index"
+              align="center"
+              sortable
+              width="80"
+            />
+            <el-table-column
+              prop="jzMc"
+              show-overflow-tooltip
+              align="center"
+              label="警组名称"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="ssbm"
+              label="所属部门"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="ddMjxm"
+              show-overflow-tooltip
+              label="警组负责人"
+              align="center"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[2, 5, 10, 20]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import { getJzList } from "@/api/basicsmanage/servicejz.js";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleId: {
+    type: String || Array,
+    default: "" || []
+  },
+  jczid:{
+    type:String,
+    default:""
+  },
+   //是否单选
+  Single: {
+    type: Boolean,
+    default: true
+  },
+});
+const keyid = (row) => {
+  return row.id;
+};
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  jczid:props.jczid
+});
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+onMounted(() => {
+  handleFilter();
+});
+
+// 重置
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, jczid:props.jczid };
+  getListData();
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+  if (props.Single) {
+    ElMessage({ type: "warning", message: "请每次选择一个警组!" });
+  } else {
+    emits("choosedUsers", userList);
+    closed();
+  }
+};
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+const getListData = async () => {
+  const params = listQuery.value;
+  const res = await getJzList(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser(row) {
+  tableData.value.forEach(item=>{
+    if(Array.isArray(props.roleId)){
+      props.roleId.forEach(v=>{
+        if(v == item.id){
+            multipleUserRef.value.toggleRowSelection(item, true);
+          }
+      })
+
+    }else{
+      if(props.roleId == item.id){
+        multipleUserRef.value.toggleRowSelection(item, true);
+      }
+    }
+  })
+}
+
+// 分页
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+// 多选
+const handleSelectionChange = (val) => {
+   if(props.Single){
+      if(val.length>1){
+        let del_row = val.shift()
+        multipleUserRef.value.toggleRowSelection(del_row,false)
+      }
+    multipleSelectionUser.value = val;
+  }else{
+    multipleSelectionUser.value = val;
+  }
+};
+
+watch(() => props.modelValue,(val) => {
+    if (val === true) handleFilter();
+  }
+);
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner{
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/JzclLoad.vue

@@ -0,0 +1,277 @@
+<template>
+  <el-dialog
+    title="选择警用车辆"
+    width="1400px"
+    :model-value="modelValue"
+    @close="closed"
+  >
+    <div v-if="modelValue">
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="所属部门" v-if="showBm">
+          <MOSTY.Department
+            width="100%"
+            clearable
+            v-model="listQuery.ssbmdm"
+          />
+        </el-form-item>
+        <el-form-item label="车牌号">
+          <el-input
+            v-model="listQuery.cph"
+            placeholder="请输入车牌号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="车辆品牌">
+          <el-select
+            filterable
+            v-model="listQuery.clpp"
+            class="m-2"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in D_BZ_CLPP"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div
+        class="tabBox"
+        :class="props.Single ? 'tabBoxRadio' : ''"
+        style="margin-top: 0px"
+      >
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          :row-key="keyid"
+          style="width: 100%"
+          height="450"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column
+            type="index"
+            show-overflow-tooltip
+            align="center"
+            width="60px"
+            label="序号"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ssbm"
+            show-overflow-tooltip
+            align="center"
+            width="250px"
+            label="所属部门"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="cplx"
+            show-overflow-tooltip
+            align="center"
+            width="150px"
+            label="号牌种类"
+          >
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_HPZL" :value="row.cplx" :tag="false" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="cph"
+            label="车牌号"
+            width="250px"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="clpp"
+            show-overflow-tooltip
+            label="车辆品牌"
+            align="center"
+            width="250px"
+          >
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_CLPP" :value="row.clpp" :tag="false" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="clnk"
+            show-overflow-tooltip
+            label="车辆年款"
+            align="center"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import {
+  defineProps,
+  ref,
+  onMounted,
+  nextTick,
+  getCurrentInstance
+} from "vue";
+import { getXfcl } from "@/api/basicsmanage/watchmanCar";
+const { proxy } = getCurrentInstance();
+const { D_BZ_HPZL, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict(
+  "D_BZ_HPZL",
+  "D_BZ_CLYS",
+  "D_BZ_CLPP"
+);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },  showBm: {
+    type: Boolean,
+    default: true
+  },
+  ssbmdm: {
+    type: String,
+    default: ""
+  }
+});
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20
+});
+const form = ref({});
+const tableData = ref([]);
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+onMounted(() => {
+  handleFilter();
+});
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const keyid = (row) => {
+  return row.cid;
+};
+const reset = () => {
+  listQuery.value = {ssbmdm:props.ssbmdm,
+    pageCurrent: 1,
+    pageSize: 20
+  };
+  getListData();
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value;
+  let list = []
+  let listId = []
+  userList.forEach(val=>{
+    if(listId.indexOf(val.cid) == -1) {
+      list.push(val);
+      listId.push(val.cid);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+const getListData = async () => {
+  const params = {...listQuery.value,ssbmdm:props.ssbmdm};
+  const res = await getXfcl(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift();
+      multipleUserRef.value.toggleRowSelection(del_row, false);
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+};
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item=>{
+    if(props.roleIds.some(id=>id == item.cid)){
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/MjLoad.vue

@@ -0,0 +1,280 @@
+<template>
+  <div>
+    <el-dialog
+      :title="titleValue"
+      width="1400px"
+      :model-value="modelValue"
+      :destroy-on-close="true"
+      @close="closed"
+    >
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item label="姓名">
+            <el-input
+              v-model="listQuery.xm"
+              placeholder="请输入姓名"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="身份证号码">
+            <el-input
+              v-model="listQuery.sfzh"
+              placeholder="请输入身份证号码"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="所属部门"  v-if="showBm">
+            <MOSTY.Department
+              width="100%"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>
+          <el-form-item label="专业技能">
+           <el-select v-model="listQuery.bqId">
+            <el-option v-for="item in lxList" :key="item.id" :label="item.bqmc" :value="item.id" ></el-option>
+          </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            border
+            style="width: 100%"
+            :row-key="keyid"
+            height="450"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              :reserve-selection="true"
+            />
+            <el-table-column
+              label="序号"
+              type="index"
+              align="center"
+              sortable
+              width="80"
+            />
+            <el-table-column
+              sortable
+              prop="xm"
+              show-overflow-tooltip
+              align="center"
+              label="民警姓名"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="sfzh"
+              show-overflow-tooltip
+              align="center"
+              label="身份证号码"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="sklList"
+              show-overflow-tooltip
+              align="center"
+              label="专业技能"
+            >
+             <template #default="{ row }">
+               <span class="tag" v-for="it in row.sklList" :key="it">{{it.bqmc}}</span>
+              </template>
+
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="ssbm"
+              label="所属部门"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              sortable
+              prop="jh"
+              label="警号"
+              align="center"
+            ></el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { getCountBqsl } from "@/api/xfll";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref,reactive, onMounted, nextTick,watchEffect } from "vue";
+import { getTbJcglXfll } from "@/api/xfll";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  titleValue: {
+    type: String,
+    default: "选择民警"
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },// 回显
+   showBm: {
+    type: Boolean,
+    default: true
+  },
+  ssbmdm: {
+    type: String,
+    default: ""
+  }
+});
+const keyid = (row) => { return row.ryid; };
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  fl: "01"
+});
+const form = ref({});
+const tableData = ref([]);
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const lxList = reactive([]); //搜索框标签选择数据
+watch(() => props.modelValue,
+  (val) => { if (val === true)  handleFilter();}
+);
+onMounted(() => {
+  getListData();
+  //获取搜索栏标签选择数据
+  getCountBqsl().then((res) => {
+    res.forEach((item) => {
+      lxList.push(item);
+    });
+  });
+});
+
+// 分页
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+// 获取列表
+const getListData = async () => {
+  const params ={...listQuery.value,ssbmdm:props.ssbmdm};
+  const res = await getTbJcglXfll(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item=>{
+    if(props.roleIds.some(id=>id == item.ryid)){
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+// 重置
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "01", };
+  getListData();
+};
+
+const handleSelectionChange = (val) => {
+  if(props.Single){
+    if(val.length>1){
+      let del_row = val.shift()
+      multipleUserRef.value.toggleRowSelection(del_row,false)
+    }
+    multipleSelectionUser.value = val;
+  }else{
+    multipleSelectionUser.value = val;
+  }
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value
+  let list = []
+  let listId = []
+  userList.forEach(val=>{
+    if(listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+.tag{
+  padding: 1px 4px;
+  box-sizing: border-box;
+  margin: 0 4px;
+  border: 1px solid #24869b;
+  border-radius: 4px;
+}
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner{
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/QfqzLoad.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-dialog :title="titleValue" width="1400px" :model-value="modelValue" :destroy-on-close="true" @close="closed">
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item label="姓名">
+            <el-input v-model="listQuery.xm" placeholder="请输入姓名" clearable />
+          </el-form-item>
+          <el-form-item label="身份证号码">
+            <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号码" clearable />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
+          <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border
+            style="width: 100%" :row-key="keyid" height="450">
+            <el-table-column type="selection" width="55" :reserve-selection="true" />
+            <el-table-column label="序号" type="index" align="center" sortable width="80" />
+            <el-table-column sortable prop="xm" show-overflow-tooltip align="center" label="民警姓名">
+            </el-table-column>
+            <el-table-column sortable prop="sfzh" show-overflow-tooltip align="center" label="身份证号码">
+            </el-table-column>
+            <el-table-column sortable prop="sklList" show-overflow-tooltip align="center" label="人员类型">
+              <template #default="{ row }">
+                {{ row.rylx == '01' ? "群众" : "党员" }}
+              </template>
+            </el-table-column>
+            <el-table-column sortable prop="sjh" label="电话号码" align="center"></el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye">
+          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { getCountBqsl } from "@/api/xfll";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import {qfqzSelectPage } from '@/api/lz/backstage'
+import { defineProps, watch, ref, reactive, onMounted, nextTick, watchEffect } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  titleValue: {
+    type: String,
+    default: "选择群防群治人员"
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },// 回显
+  // showBm: {
+  //   type: Boolean,
+  //   default: true
+  // },
+  // ssbmdm: {
+  //   type: String,
+  //   default: ""
+  // }
+});
+const keyid = (row) => { return row.ryid; };
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+});
+const form = ref({});
+const tableData = ref([]);
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const lxList = reactive([]); //搜索框标签选择数据
+watch(() => props.modelValue,
+  (val) => { if (val === true) handleFilter(); }
+);
+onMounted(() => {
+  getListData();
+  //获取搜索栏标签选择数据
+  getCountBqsl().then((res) => {
+    res.forEach((item) => {
+      lxList.push(item);
+    });
+  });
+});
+
+// 分页
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+// 获取列表
+const getListData = async () => {
+  const params = listQuery.value;
+  const res = await qfqzSelectPage(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item => {
+    if (props.roleIds.some(id => id == item.ryid)) {
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+// 重置
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "01", };
+  getListData();
+};
+
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift()
+      multipleUserRef.value.toggleRowSelection(del_row, false)
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value
+  let list = []
+  let listId = []
+  userList.forEach(val => {
+    if (listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+
+.tag {
+  padding: 1px 4px;
+  box-sizing: border-box;
+  margin: 0 4px;
+  border: 1px solid #24869b;
+  border-radius: 4px;
+}
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/ZnzbLoad.vue

@@ -0,0 +1,315 @@
+<template>
+  <el-dialog
+    title="选择智能装备"
+    width="1400px"
+    :model-value="modelValue"
+    @close="closed"
+  >
+    <div v-if="modelValue">
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="所属部门" v-if="showBm">
+          <MOSTY.Department
+            width="100%"
+            clearable
+            v-model="listQuery.ssbmdm"
+          />
+        </el-form-item>
+        <el-form-item label="装备类型">
+          <el-cascader
+            v-model="listQuery.scode"
+            :options="D_BZ_ZBLX_LZ"
+            :props="propsTree"
+            clearable
+            :show-all-levels="false"
+          >
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="生产日期">
+          <el-date-picker
+          unlink-panels
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            v-model="listQuery.gzrq"
+            type="date"
+            placeholder="请选择日期"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          :row-key="keyid"
+          style="width: 100%"
+          height="450"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column
+            type="index"
+            show-overflow-tooltip
+            align="center"
+            width="60px"
+            label="序号"
+          >
+          </el-table-column
+          ><el-table-column
+            sortable
+            prop="ssbm"
+            label="所属部门"
+            width="250px"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="scode"
+            show-overflow-tooltip
+            align="center"
+            width="350px"
+            label="装备类型"
+          >
+            <template #default="{ row }">
+              <dict-tag :options="zbAllList" :value="row.scode" :tag="false" />
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            sortable
+            prop="xh"
+            show-overflow-tooltip
+            label="装备型号"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="sbmc"
+            show-overflow-tooltip
+            label="装备名称"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="cgrq"
+            show-overflow-tooltip
+            label="生产日期"
+            align="center"
+            width="200px"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageNo"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick,getCurrentInstance } from "vue";
+import { getZnzb } from "@/api/basicsmanage/intelligence";
+const { proxy } = getCurrentInstance();
+const { D_BZ_ZNZBFL,D_BZ_ZBLX_LZ } = proxy.$dict("D_BZ_ZNZBFL","D_BZ_ZBLX_LZ");
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },
+    //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  zblx: {
+    type: String,
+    default: ""
+  },
+  data: {
+    type: Array,
+    default: []
+  },
+  showBm: {
+    type: Boolean,
+    default: true
+  },
+  ssbmdm: {
+    type: String,
+    default: ""
+  }
+});
+const propsTree = ref({
+  checkStrictly: true,
+  emitPath: false,
+  multiple: false
+});
+const total = ref(0);
+const listQuery = ref({
+  pageNo: 1,
+  pageSize: 20
+})
+const form = ref({});
+const tableData = ref([]);
+const zbAllList = ref([])
+watch(
+  () => D_BZ_ZBLX_LZ.value,
+  (val) => {
+    val.forEach((p) => {
+      zbAllList.value.push(p);
+      if (p.itemList && p.itemList.length > 0) {
+        getChildren(p);
+      }
+    });
+  }
+);
+watch(
+  () => props.zblx,
+  (val) => {
+    if (val) {
+      listQuery.value.ssbmdm = props.ssbmdm
+      listQuery.value.scode = val ? val : "";
+    }
+  },{
+    deep:true,
+    immediate:true
+  }
+);
+
+// 递归处理数据
+function getChildren(item) {
+  zbAllList.value.push(item);
+  if (item.itemList && item.itemList.length > 0) {
+    item.itemList.forEach((v) => {
+      getChildren(v);
+    });
+  }
+}
+
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+function changelx(val) {
+  listQuery.value.scode = val ? val : "";
+}
+const reset = () => {
+  listQuery.value = {
+    pageNo: 1,
+    ssbmdm: props.ssbmdm,
+    pageSize: 20
+  };
+  listQuery.value.scode = props.zblx
+  getListData();
+};
+const keyid = (row) => {
+  return row.id;
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value
+  let list = []
+  let listId = []
+  userList.forEach(val=>{
+    if(listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageNo = currentPage;
+  getListData();
+};
+const getListData = async () => {
+  const params = listQuery.value;
+  const res = await getZnzb(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser(row) {
+    tableData.value.forEach(item=>{
+      if(props.roleIds.some(id=>id == item.id)){
+        multipleUserRef.value.toggleRowSelection(item, true);
+      }
+    })
+}
+
+const handleFilter = () => {
+  listQuery.value.pageNo = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  if(props.Single){
+    if(val.length>1){
+      let del_row = val.shift()
+      multipleUserRef.value.toggleRowSelection(del_row,false)
+    }
+    multipleSelectionUser.value = val;
+  }else{
+    multipleSelectionUser.value = val;
+  }
+};
+
+onMounted(()=>{
+  handleFilter();
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner{
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/jczLoad.vue

@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <el-dialog
+      :title="titleValue"
+      width="1400px"
+      v-model="modelValue"
+      @close="closed"
+    >
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item label="所属部门">
+            <MOSTY.Department
+              width="100%"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>
+          <el-form-item label="检查站名称">
+            <el-input
+              v-model="listQuery.jczmc"
+              placeholder="请输入检查站名称"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" style="margin-top: 0px" v-if="modelValue">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            :highlight-current-row="props.Single"
+            border
+            v-loading="loading"
+            style="width: 100%"
+            :row-key="keyid"
+            height="450"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              :reserve-selection="true"
+              v-if="!props.Single"
+            />
+            <el-table-column width="55" #default="{ row }" v-else>
+              <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
+            </el-table-column>
+            <el-table-column
+              label="序号"
+              type="index"
+              align="center"
+              sortable
+              width="80"
+            />
+            <el-table-column
+              sortable
+              prop="ssbm"
+              label="所属部门"
+              show-overflow-tooltip
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              sortable
+              prop="jczmc"
+              show-overflow-tooltip
+              align="center"
+              label="检查站名称"
+            >
+            </el-table-column>
+            <el-table-column
+              show-overflow-tooltip
+              align="center"
+              label="检查站类型"
+              prop="jczlx"
+            >
+              <template #default="{ row }">
+                <dict-tag
+                  :options="D_BZ_JCZLX"
+                  :value="row.jczlx"
+                  :tag="false"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="xxdz"
+              show-overflow-tooltip
+              align="center"
+              label="检查站地址"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="jd"
+              show-overflow-tooltip
+              label="经度"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="wd"
+              show-overflow-tooltip
+              label="纬度"
+              align="center"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye" >
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[2, 5, 10, 20]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import {
+  defineProps,
+  watch,
+  ref,
+  onMounted,
+  nextTick,
+  getCurrentInstance
+} from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_JCZLX } = proxy.$dict("D_BZ_JCZLX");
+const props = defineProps({
+  //是否显示
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  //标题
+  titleValue: {
+    type: String,
+    default: "选择检查站"
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  //已经选中得数据回显
+  data: {
+    type: Array,
+    default: []
+  }
+});
+const keyid = (row) => {
+  return row.id;
+};
+const ridioIndex = ref(null);
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  jczmc: "",
+  ssbmdm: ""
+});
+const form = ref({});
+const tableData = ref([]);
+const loading = ref(false)
+const emits = defineEmits(["update:modelValue", "choosedJcz"]);
+const closed = () => {
+  listQuery.value.jczmc = "";
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = {
+    pageCurrent: 1,
+    pageSize: 20,
+    jczmc: "",
+    ssbmdm: ""
+  };
+  getListData();
+};
+// 判断传进来的选中数据和加载的选中数据不满足的数据
+const checkopenList = ref([]);
+
+// 确定选中
+const onComfirm = () => {
+  //单选
+  if (props.Single) {
+    if (![ridioIndex.value][0]) {
+      proxy.$message.warning("请选择检查站");
+      return;
+    }
+    const info = tableData.value.find((item) => {
+      return item.id === ridioIndex.value;
+    });
+    emits("choosedJcz", [JSON.parse(JSON.stringify(info))]);
+  } else {
+    //多选
+    const jczList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+    if (jczList.length === 0) {
+      proxy.$message.warning("请选择检查站");
+      return;
+    }
+    emits("choosedJcz", [...jczList, ...checkopenList.value]);
+  }
+  closed();
+};
+onMounted(() => {
+  getListData();
+});
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+//检查站数据
+const getListData = async () => {
+  loading.value = true
+  qcckGet(listQuery.value, "/mosty-jmxf/jcz/selectJczList").then((res) => {
+    tableData.value = res?.records;
+    loading.value = false
+    multipleUser(props.data, tableData.value);
+    total.value = Number(res.total);
+  }).catch(()=>{ loading.value = false });
+};
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelectionUser.value = val;
+  if (checkopenList.value) {
+    for (let i = 0; i < multipleSelectionUser.value.length; i++) {
+      const l = multipleSelectionUser.value[i];
+      for (let j = 0; j < checkopenList.value.length; j++) {
+        const z = checkopenList.value[j];
+        if (l.id == z.id) {
+          checkopenList.value.splice(j, 1);
+        }
+      }
+    }
+  }
+};
+//回显--用于多选表格
+function multipleUser(row, list) {
+  if (row) {
+    if (props.Single) {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (typeof item == "object") {
+            if (item.id == select.id) {
+              ridioIndex.value = item.id;
+            }
+          } else {
+            if (item == select.id) {
+              ridioIndex.value = item;
+            }
+          }
+        });
+      });
+    } else {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (item.id == select.id) {
+            if (multipleUserRef.value) {
+              multipleUserRef.value.toggleRowSelection(select, true);
+            }
+          }
+        });
+      });
+    }
+  }
+}
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === true) {
+      ridioIndex.value = "";
+      handleFilter();
+    }
+  }
+);
+watch(
+  () => props.data,
+  (val) => {
+    if (multipleUserRef.value) multipleUser(val, tableData.value);
+    checkopenList.value = JSON.parse(JSON.stringify(val));
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+::v-deep .el-form--inline {
+  padding-left: 0 !important;
+}
+::v-deep .el-radio__label {
+  display: none;
+}
+
+::v-deep .el-table__body tr.current-row > td.el-table__cell {
+  background: #106fdc;
+}
+</style>

src/components/MyComponents/ChooseJz/ryload.vue

@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <el-dialog
+      :title="titleValue"
+      width="1400px"
+      :model-value="modelValue"
+      :destroy-on-close="true"
+      append-to-body
+      @close="closed"
+    >
+      <div v-if="modelValue">
+        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+          <el-form-item label="姓名">
+            <el-input v-model="listQuery.xm" placeholder="请输入姓名" clearable/>
+          </el-form-item>
+          <el-form-item label="身份证号码">
+            <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号码" clearable/>
+          </el-form-item>
+          <el-form-item label="所属部门">
+            <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
+          </el-form-item>
+          <el-form-item label="人员类型">
+            <el-select v-model="listQuery.fl" placeholder="请选择人员类型" clearable>
+              <el-option label="民警" value="01"></el-option>
+              <el-option label="辅警" value="02"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="success" @click="handleFilter">查询</el-button>
+            <el-button type="info" @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            border
+            style="width: 100%"
+            :row-key="keyid"
+            height="450"
+          >
+            <el-table-column type="selection" width="55" :reserve-selection="true"/>
+            <el-table-column label="序号" type="index" align="center" width="80"/>
+            <el-table-column prop="xm" align="center" label="民警姓名"></el-table-column>
+            <el-table-column prop="sfzh"  align="center" label="身份证号码"></el-table-column>
+            <el-table-column prop="fl" align="center" label="类型">
+            <template #default="{ row }">
+              <span v-if="row.fl == '01'">民警</span>
+              <span v-if="row.fl == '02'">辅警</span>
+            </template>
+            </el-table-column>
+            <el-table-column prop="jh" label="警号" align="center"></el-table-column>
+             <el-table-column prop="ssbm" label="所属部门" align="center"></el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick,watchEffect } from "vue";
+import { getTbJcglXfll } from "@/api/xfll";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  titleValue: {
+    type: String,
+    default: "选择民警"
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },// 回显
+});
+const keyid = (row) => { return row.id; };
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+});
+const form = ref({});
+const tableData = ref([]);
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+watch(() => props.modelValue,
+  (val) => { if (val === true)  handleFilter();}
+);
+onMounted(() => {
+  getListData();
+});
+
+// 分页
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+// 获取列表
+const getListData = async () => {
+  const params = listQuery.value;
+  const res = await getTbJcglXfll(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item=>{
+    if(props.roleIds.some(id=>id == item.id)){
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+// 重置
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, fl: "01", };
+  getListData();
+};
+
+const handleSelectionChange = (val) => {
+  if(props.Single){
+    if(val.length>1){
+      let del_row = val.shift()
+      multipleUserRef.value.toggleRowSelection(del_row,false)
+    }
+    multipleSelectionUser.value = val;
+  }else{
+    multipleSelectionUser.value = val;
+  }
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value
+  let list = []
+  let listId = []
+  userList.forEach(val=>{
+    if(listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  closed();
+};
+
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner{
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseJz/xzLoad.vue

@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <el-dialog title="选择警组"  width="1400px" :model-value="modelValue" @close="closed">
+      <div v-if="modelValue">
+        <el-form :model="listQuery" :inline="true">
+          <el-form-item label="所属部门">
+            <MOSTY.Department
+              width="280px"
+              clearable
+              v-model="listQuery.ssbmdm"
+            />
+          </el-form-item>
+          <el-form-item label="警组名称">
+            <el-input
+              v-model="listQuery.jzMc"
+              placeholder="请输入警组名称"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item label="负责人">
+            <el-input
+              v-model="listQuery.fzrXm"
+              placeholder="请输入负责人"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleFilter"> 查询 </el-button>
+            <el-button @click="reset()"> 重置 </el-button>
+          </el-form-item>
+        </el-form>
+        <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
+          <el-table
+            ref="multipleUserRef"
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            border
+            style="width: 100%"
+            :row-key="keyid"
+            height="450"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              :reserve-selection="true"
+            />
+            <el-table-column
+              label="序号"
+              type="index"
+              align="center"
+              sortable
+              width="80"
+            />
+            <el-table-column
+              prop="jzMc"
+              show-overflow-tooltip
+              align="center"
+              label="警组名称"
+            >
+            <template #default="{ row }">
+              <span>{{ row.jzMc ? row.jzMc : row.fzrXm + "巡组" }}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+              prop="ssbm"
+              label="所属部门"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="fzrXm"
+              show-overflow-tooltip
+              label="警组负责人"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="fzrLxdh"
+              show-overflow-tooltip
+              label="负责人联系电话"
+              align="center"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="fenye">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.pageCurrent"
+            :page-sizes="[2, 5, 10, 20]"
+            :page-size="listQuery.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import { getSelectDeckList } from "@/api/dpApi/home.js";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleId: {
+    type: String || Array,
+    default: "" || []
+  },
+  jczid:{
+    type:String,
+    default:""
+  },
+   //是否单选
+  Single: {
+    type: Boolean,
+    default: true
+  },
+});
+const keyid = (row) => {
+  return row.id;
+};
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  jczid:props.jczid
+});
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+onMounted(() => {
+  handleFilter();
+});
+
+// 重置
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20, jczid:props.jczid };
+  getListData();
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+  if (props.Single) {
+    ElMessage({ type: "warning", message: "请每次选择一个警组!" });
+  } else {
+    emits("choosedUsers", userList);
+    closed();
+  }
+};
+// pageSize 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+const getListData = async () => {
+  const params = listQuery.value;
+  const res = await getSelectDeckList(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  multipleUser()
+};
+
+//列表回显
+function multipleUser(row) {
+  tableData.value.forEach(item=>{
+    if(Array.isArray(props.roleId)){
+      props.roleId.forEach(v=>{
+        if(v == item.id){
+            multipleUserRef.value.toggleRowSelection(item, true);
+          }
+      })
+
+    }else{
+      if(props.roleId == item.id){
+        multipleUserRef.value.toggleRowSelection(item, true);
+      }
+    }
+  })
+}
+
+// 分页
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+// 多选
+const handleSelectionChange = (val) => {
+   if(props.Single){
+      if(val.length>1){
+        let del_row = val.shift()
+        multipleUserRef.value.toggleRowSelection(del_row,false)
+      }
+    multipleSelectionUser.value = val;
+  }else{
+    multipleSelectionUser.value = val;
+  }
+};
+
+watch(() => props.modelValue,(val) => {
+    if (val === true) handleFilter();
+  }
+);
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner{
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>

src/components/MyComponents/ChooseUser/AbIndex.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-dialog :title="titleValue" width="1400px" :model-value="modelValue" append-to-body @close="closed">
+    <div>
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="所属部门">
+          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
+        </el-form-item>
+        <el-form-item label="姓名">
+          <el-input placeholder="请输入姓名" v-model="listQuery.xm" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
+        <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border
+          :row-key="keyid" style="width: 100%" height="450">
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column prop="xm" align="center" label="姓名"></el-table-column>
+          <el-table-column prop="zjhm" align="center" label="证件号码"></el-table-column>
+          <el-table-column prop="lxdh" align="center" label="联系方式"></el-table-column>
+          <el-table-column prop="wpdw" align="center" label="外派单位"></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination class="pagination" @pageSize-change="handleSizeChange" @pageCurrent-change="handleCurrentChange"
+          :pageCurrent-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-pageSize="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { qcckGet } from "@/api/qcckApi.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { defineProps,ref, onMounted, nextTick } from "vue";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  titleValue: {
+    type: String,
+    default: "选择安保"
+  },
+  LeaderType: {
+    type: String,
+    default: ""
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },
+});
+const total = ref(0);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20
+});
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+onMounted(() => {
+  handleFilter();
+});
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = { pageCurrent: 1, pageSize: 20 };
+  getListData();
+};
+
+const keyid = (row) => {
+  return row.id;
+};
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value;
+  let list = []
+  let listId = []
+  userList.forEach(val => {
+    if (listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  let data = { type: props.LeaderType, userList: userList };
+  emits("choosedUsersLeader", data);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+const getListData = () => {
+  const params = listQuery.value;
+  qcckGet(params,"/mosty-jbld/tbbary/selectPage").then(res => {
+    tableData.value = res?.records;
+    total.value = Number(res.total);
+    multipleUser()
+  });
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item => {
+    if (props.roleIds.some(id => id == item.id)) {
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift();
+      multipleUserRef.value.toggleRowSelection(del_row, false);
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+
+/* .el-dialog {
+  background: #050e33;
+}
+
+.el-dialog__title {
+  color: #fff;
+} */
+</style>

src/components/MyComponents/ChooseUser/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <el-dialog :title="titleValue" width="1400px" :model-value="modelValue" append-to-body @close="closed">
+    <div>
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="所属部门" v-if="showBm">
+          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
+        </el-form-item>
+        <el-form-item label="用户名">
+          <el-input placeholder="请输入用户名" v-model="listQuery.loginName" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="电话号码">
+          <el-input placeholder="请输入电话号码" v-model="listQuery.phone" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px">
+        <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border
+          :row-key="keyid" style="width: 100%" height="450">
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column prop="loginName" align="center" label="用户名" width="150"></el-table-column>
+          <el-table-column prop="idEntityCard" align="center" label="身份证号"></el-table-column>
+          <el-table-column prop="deptName" align="center" label="部门"></el-table-column>
+          <el-table-column prop="inDustRialId" align="center" width="150" label="警号"></el-table-column>
+          <el-table-column prop="mobile" width="150" align="center" label="电话"></el-table-column>
+          <el-table-column prop="sex" align="center" label="性别">
+            <template #default="{ row }">
+              <span> {{ row.sex == 1 ? "男" : "女" }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="listQuery.current" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import { selectUnAccreditPage, selectUserDeptPage } from "@/api/user-manage";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  titleValue: {
+    type: String,
+    default: "选择用户"
+  },
+  LeaderType: {
+    type: String,
+    default: ""
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },   showBm: {
+    type: Boolean,
+    default: true
+  },
+  ssbmdm: {
+    type: String,
+    default: ""
+  }
+});
+const total = ref(0);
+const listQuery = ref({
+  current: 1,
+  size: 20
+});
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+onMounted(() => {
+  handleFilter();
+});
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = {
+    current: 1,
+    size: 20,
+    loginName: "",
+    phone: ""
+  };
+  getListData();
+};
+
+const keyid = (row) => {
+  return row.id;
+};
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value;
+  let list = []
+  let listId = []
+  userList.forEach(val => {
+    if (listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  let data = { type: props.LeaderType, userList: userList };
+  emits("choosedUsersLeader", data);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.current = currentPage;
+  getListData();
+};
+const getListData = () => {
+  const params = {...listQuery.value, ssbmdm: props.ssbmdm};
+
+  selectUserDeptPage(params).then(res => {
+    tableData.value = res?.records;
+    total.value = Number(res.total);
+    multipleUser()
+  });
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item => {
+    if (props.roleIds.some(id => id == item.id)) {
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift();
+      multipleUserRef.value.toggleRowSelection(del_row, false);
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+
+};
+watch(()=>props.modelValue,()=>{
+  getListData();
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+
+/* .el-dialog {
+  background: #050e33;
+}
+
+.el-dialog__title {
+  color: #fff;
+} */
+</style>

src/components/MyComponents/Date/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-date-picker v-bind="$attrs" @change="changeTime" v-if="props.type == 'date'" v-model="modelValue" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width:100%"  />
+    <el-time-picker v-bind="$attrs" @change="changeTime" v-if="props.type == 'time'" v-model="modelValue" placeholder="选择时间" style="width:100%"  />
+    <el-date-picker v-bind="$attrs" @change="changeTime" v-if="props.type == 'datetime'" v-model="modelValue" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" style="width:100%"  />
+    <el-date-picker v-bind="$attrs" @change="changeTime" v-if="props.type == 'datetimerange'" v-model="modelValue" type="datetimerange" :shortcuts="shortcuts" range-separator="To" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="选择开始时间" end-placeholder="选择结束时间" style="width:100%"  />
+    <el-date-picker v-bind="$attrs" @change="changeTime" v-if="props.type == 'daterange'" v-model="modelValue" type="daterange" range-separator="To" value-format="YYYY-MM-DD" start-placeholder="选择开始日期" end-placeholder="选择开始日期" style="width:100%"  />
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { defineProps, defineEmits } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  },
+  type:{
+    default: "date",
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const shortcuts = [
+  {
+    text: "今天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
+      return [start, end];
+    }
+  },
+  {
+    text: "昨天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
+      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
+      return [start, end];
+    }
+  },
+  {
+    text: "最近7天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: "最近30天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: "最近90天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+
+const changeTime = (e) => {
+  emits("update:modelValue", e);
+};
+</script>
+

src/components/MyComponents/Department/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-cascader
+      style="width: 100%"
+      class="el-cascader-zj"
+      :show-all-levels="false"
+      clearable
+      filterable
+      :placeholder="modelValue ? placeholder : '请选择部门'"
+      :options="tableData"
+      v-model="oldmodelValue"
+      @change="handleChange"
+      :props="endProps"
+    />
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
+import { selectDeptPage } from "@/api/user-manage";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  isAll: {
+    default: 100,
+    type: Number
+  },
+  modelValue: {
+    type: Array || String,
+    default: []
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const oldmodelValue = ref([]);
+const listQuery = ref({
+  deptname: "",
+  deptcode: "",
+  parentid: ""
+});
+const depList = ref([]);
+//配置项
+const endProps = {
+  children: "childDeptList",
+  value: "orgCode",
+  label: "orgName",
+  checkStrictly: true,
+  multiple: props.multiple,
+  lazy: true,
+  lazyLoad(node, resolve) {
+    listQuery.value.parentid = node.data.id;
+    selectDeptPage(listQuery.value).then((res) => {
+      depList.value = depList.value.concat(res);
+      //处理部门是否包含下级
+      for (let i = 0; i < res.length; i++) {
+        res[i].leaf = !res[i].hasChildren;
+      }
+      resolve(res);
+    });
+  }
+};
+const tableData = ref([]);
+const getSysMenuTree = async () => {
+  const res = await selectDeptPage(listQuery.value);
+  tableData.value = res;
+  depList.value = res;
+};
+
+onMounted(() => {
+  getSysMenuTree();
+});
+watch(
+  () => props.modelValue,
+  (val) => {
+    oldmodelValue.value = val;
+  },
+  { deep: true, immediate: true }
+);
+const emits = defineEmits(["update:modelValue", "getDepValue"]);
+const handleChange = (e) => {
+  if (props.multiple === true) {
+    const data = e.map((item) => {
+      return item[item.length - 1];
+    });
+    emits("update:modelValue", data);
+  } else {
+    const data = e ? e[e.length - 1] : "";
+    emits("update:modelValue", data);
+    let obj = depList.value.find((item) => {
+      return item.orgCode == data;
+    });
+    emits("getDepValue", obj);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.el-cascader-zj {
+  width: 100%;
+}
+</style>

src/components/MyComponents/DepartmentTree/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="departmentTree-box" :style="{ width: width, height: '100%' }">
+    <div class="depar_hear">
+      <el-input
+        v-model="listQuery.deptname"
+        v-if="filterable"
+        clearable
+        :debounce="500"
+        @input="filterTextChange"
+        placeholder="请输入筛选条件"
+      />
+    </div>
+    <div class="depar_foot">
+      <el-tree
+        ref="treeRef"
+        class="filter-tree"
+        :props="endProps"
+        lazy
+        :load="loadNode"
+        @node-click="nodeClick"
+        :filter-node-method="filterNode"
+        :data="treeData"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { debounce } from "lodash";
+import { getItem } from "@/utils/storage";
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, watch, computed, onMounted } from "vue";
+import { selectDeptPage, getAllChildDeptList } from "@/api/user-manage";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  filterable: {
+    default: false,
+    type: Boolean
+  },
+  modelValue: {
+    type: Number
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  },
+  isBmId:{
+    type:Boolean,
+    default:false
+  }
+});
+const listQuery = ref({
+  deptname: "",
+  deptcode: "",
+  parentid: ""
+});
+const treeRef = ref(null);
+const node_had = ref([]);
+const resolve_had = ref([]);
+//防抖处理
+const filterTextChange = debounce(inputChange, 500);
+onMounted(() => {});
+//获取部门数据
+function getTreeData() {
+  selectDeptPage(listQuery.value).then((res) => {
+    for (let i = 0; i < res.length; i++) {
+      res[i].leaf = !res[i].hasChildren;
+    }
+    treeData.value = res;
+  });
+}
+//搜索查询
+function inputChange(e) {
+  selectDeptPage(listQuery.value).then((res) => {
+    treeData.value = res;
+  });
+}
+
+watch(
+  () => listQuery.value.deptname,
+  (val) => {
+    treeRef.value.filter("tree", val);
+  }
+);
+const endProps = {
+  children: "childDeptList",
+  value: "id",
+  label: "orgName",
+  isLeaf: "leaf"
+};
+const treeData = ref([]);
+//懒加载方法
+async function loadNode(node, resolve) {
+  listQuery.value.parentid = node.data.id;
+  if (node.level === 0) {
+    node_had.value = node;
+    resolve_had.value = resolve;
+    getTreeData();
+  }
+  if (node.level >= 1) {
+    selectDeptPage(listQuery.value).then((res) => {
+      for (let i = 0; i < res.length; i++) {
+        res[i].leaf = !res[i].hasChildren;
+      }
+      resolve(res);
+    });
+  }
+}
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.orgName.includes(value);
+};
+
+const nodeClick = (node) => {
+  if(props.isBmId){
+    emits("update:modelValue", node.id);
+  }else{
+    emits("update:modelValue", node.orgCode);
+  }
+};
+
+const emits = defineEmits(["update:modelValue"]);
+const handleChange = (e) => {
+  if (props.multiple === true) {
+    const data = e.map((item) => {
+      return item[item.length - 1];
+    });
+    emits("update:modelValue", data);
+  } else {
+    const data = e[0];
+    emits("update:modelValue", data);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.depar_hear {
+  height: 32px;
+}
+.depar_foot {
+  height: calc(100% - 32px);
+  overflow: auto;
+  width: 280px;
+  width: 100%;
+  min-width: 300px;
+}
+.departmentTree-box {
+  overflow: auto;
+}
+</style>

src/components/MyComponents/DownLoad/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    title="导出预览"
+    width="1400px"
+    :model-value="modelValue"
+    @close="closed"
+  >
+    <el-table :data="data" :id="myId" style="width: 100%" border>
+      <el-table-column label="序号" type="index" align="center" width="80" />
+      <el-table-column
+        v-for="(item, index) in tabOption"
+        :key="index + 'tab'"
+        :prop="item.prop"
+        :label="item.label"
+        align="center"
+      >
+        <template v-if="item.dict" #default="{ row }">
+          <dict-tag :options="item.dict" :value="row[item.prop]" :tag="false" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="exportExcel">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
+import FileSaver from "file-saver";
+import * as XLSX from "xlsx";
+const tabRef = ref(null);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  tabOption: {
+    type: Array,
+    require: []
+  },
+  data: {
+    type: Array,
+    required: []
+  },
+  myId: {
+    type: String,
+    require: ""
+  },
+  title: {
+    type: String,
+    require: ""
+  }
+});
+const emits = defineEmits(["update:modelValue"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const { proxy } = getCurrentInstance();
+function exportExcel() {
+  let xlsxParam = { raw: true };
+  let wb = XLSX.utils.table_to_book(
+    document.querySelector("#" + props.myId),
+    xlsxParam
+  );
+  let wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: true,
+    type: "array"
+  });
+  closed();
+  try {
+    FileSaver.saveAs(
+      new Blob([wbout], { type: "application/octet-stream" }),
+      `${props.title}.xlsx`
+    );
+  } catch (e) {
+    if (typeof console !== "undefined") console.log(e, wbout);
+  }
+  return wbout;
+}
+</script>
+
+<style>
+</style>

src/components/MyComponents/Email/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="form-item-box zj-email-wrap" :style="{ width: width }">
+    <el-autocomplete v-model="email" v-bind="$attrs" :placeholder="placeholder" :fetch-suggestions="querySearch"
+      :trigger-on-focus="false" class="inline-input" @select="handleSelect" @input="onInput" />
+    <!-- <el-icon class="errorIcon">
+      <circle-close-filled />
+    </el-icon>
+    <el-icon class="checkIcon">
+      <circle-check-filled />
+    </el-icon> -->
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { ref, defineProps, defineEmits, defineExpose, onMounted } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写邮箱",
+    type: String
+  },
+  email: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:email"]);
+const onInput = (e) => {
+  emits("update:email", e);
+};
+const restaurants = ref([]);
+const createFilter = (queryString) => {
+  return (item) => {
+    return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+  };
+};
+const querySearch = (queryString, callback) => {
+  let results = JSON.parse(JSON.stringify(restaurants.value)); //把数组的浅复制换成深复制
+  if (queryString.indexOf("@") > -1) {
+    results.length = 0;
+    callback(results);
+    return false;
+  }
+  for (let item in results) {
+    results[item].value = queryString + "" + restaurants.value[item].value;
+  }
+  callback(results);
+};
+
+const loadAll = () => {
+  return [
+    { value: "@qq.com" },
+    { value: "@mosty.com" },
+    { value: "@163.com" },
+    { value: "@outlook.com" },
+    { value: "@sohu.com" }
+  ];
+};
+const handleSelect = (item) => {
+  emits("update:email", item.value);
+};
+
+onMounted(() => {
+  restaurants.value = loadAll();
+});
+</script>
+
+<style lang="scss" scoped>
+.zj-email-wrap {
+  ::v-deep .el-autocomplete {
+    width: 100%;
+  }
+}
+</style>

src/components/MyComponents/Empty/index.vue

@@ -0,0 +1,28 @@
+<template>
+   <el-empty :description="props.description" :image="require('@/assets/images/icon_043.png')" v-if="props.show" :image-size="props.imgSize" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  imgSize:{
+    type:Number,
+    default:150
+  },
+  show:{
+    type:Boolean,
+    default:false
+  },
+  description:{
+    type:String,
+    default:'暂无数据'
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-empty {
+  --el-empty-padding: 30px 0;
+}
+
+</style>

src/components/MyComponents/FileUpload/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="main-box">
+    <div class="file_box" v-for="(item, index) in fileList" :key="index">
+      <div class="show_file" :style="{ width: width, height: width }">
+        <div class="icon_box_y" :style="{ width: width, height: width }">
+          <svg-icon :icon="getSuffix(item.url)" />
+          <span class="file_name_box">{{ item.name }}</span>
+        </div>
+        <div class="load_and_del" :style="{ width: width, height: width }">
+          <el-icon class="load_and_del_icon" :size="18" color="#aaaaaa">
+            <DeleteFilled v-if="props.isEdit" @click="delFile(index)" />
+          </el-icon>
+          <el-icon class="load_and_del_icon" :size="18" color="#aaaaaa">
+            <Download @click="downloadFile(item.url)" />
+          </el-icon>
+        </div>
+      </div>
+    </div>
+    <div class="file_box" v-if="fileList.length != props.limit && props.isEdit">
+      <div class="upload_img" :style="{ width: width, height: width }">
+        <div class="icon_box" :style="{ width: width, height: width }">
+          <el-icon :size="30" color="#aaaaaa">
+            <Plus />
+          </el-icon>
+        </div>
+        <div class="file_box_item" :style="{ width: width, height: width }">
+          <input
+            type="file"
+            :style="{ width: width, height: width }"
+            class="file_input"
+            id="file"
+            @change="fileChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  computed,
+  onMounted
+} from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import request from "@/utils/request";
+import axios from "axios";
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  width: {
+    type: String,
+    default: "150px"
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  }
+});
+const fileList = ref([]);
+const count = ref(0); // 上传的数量
+
+const emits = defineEmits(["update:modelValue", "handleChange"]);
+//获取后缀
+const getSuffix = (fileName) => {
+  let suffix = "";
+  try {
+    suffix = fileName.substr(fileName.lastIndexOf(".") + 1, 4);
+    if (suffix.indexOf("?") !== -1) suffix = suffix.replaceAll("?", "");
+  } catch (err) {
+    suffix = "";
+    return "OTHER";
+  }
+  // fileName无后缀返回 false
+  if (!suffix) return "";
+  // 图片格式
+  var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
+  if (imglist.includes(suffix)) return "IMG";
+  //txt
+  if (suffix === "txt") return "TXT";
+  //excel XLS
+  const excelist = ["xls", "xlsx"];
+  if (excelist.includes(suffix)) return "XLS";
+  // 匹配 word
+  var wordlist = ["doc", "docx"];
+  if (wordlist.includes(suffix)) return "DOC";
+  //pdf
+  if (suffix === "pdf") return "PDF";
+  //视频 音频
+  var videolist = [
+    "mp4",
+    "m2v",
+    "mkv",
+    "rmvb",
+    "wmv",
+    "avi",
+    "flv",
+    "mov",
+    "m4v"
+  ];
+  if (videolist.includes(suffix)) return "VIDEO";
+  var musiclist = ["mp3", "wav", "wmv"];
+  if (musiclist.includes(suffix)) return "MUSIC";
+  var pptlist = ["ppt", "pptx"];
+  if (pptlist.includes(suffix)) return "PPT";
+  //压缩包
+  var yslist = ["7z", "rar", "zip", "apz", "ar", "hpk", "hyp", "hbc2"];
+  if (yslist.includes(suffix)) return "YS";
+  //否则返回other
+  return "OTHER";
+};
+// 删除
+function delFile(index) {
+  fileList.value = fileList.value.filter((item, i) => {
+    return i !== index;
+  });
+}
+// 文件下载
+function downloadFile(url) {
+  window.open('/mosty-base/minio/image/download/'+url, "_blank");
+}
+// 选择文件
+function fileChange(e) {
+  let file = document.getElementById("file").files[0];
+  let name = file.name;
+  let formData = new FormData();
+  formData.append("file", file);
+  axios
+    .post("/mosty-base/minio/image/upload/id", formData, {
+      "Content-type": "multipart/form-data"
+    })
+    .then((res) => {
+      if (res.status == 200 && res.data && res.data.code === 10000) {
+        let url = res.data.data;
+        let f = {
+          url: url,
+          name: name
+        };
+        fileList.value.push(f);
+        count.value = count.value + 1;
+        let list = fileList.value.map((item) => {
+          return item.url;
+        });
+        emits("handleChange", JSON.stringify(list));
+      } else {
+        ElMessage.warning("文件上传失败");
+      }
+    });
+}
+onMounted(() => {
+  if (props.modelValue) {
+    let list = JSON.parse(props.modelValue);
+    list.forEach((item, index) => {
+      let temp = {
+        url: item,
+        name: "文件" + (index + 1)
+      };
+      fileList.value.push(temp);
+    });
+    count.value = list.length;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.main-box {
+  width: 100%;
+  .file_box {
+    background-color: #112b63;
+    border: 1px dashed #4579b5;
+    margin: 10px 0 0 10px;
+    border-radius: 5px;
+    position: relative;
+    .show_file {
+      overflow: hidden;
+      box-sizing: border-box;
+      &:hover > .load_and_del {
+        display: block;
+      }
+      .load_and_del {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        .load_and_del_icon {
+          cursor: pointer;
+          margin-left:5px;
+          margin-top: 5px;
+        }
+      }
+      .icon_box_y {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        .file_name_box {
+          margin-top: 10px;
+          width: 80%;
+          line-height: 30px;
+          height: 30px;
+          overflow: hidden;
+          text-align: center;
+        }
+      }
+      ::v-deep .svg-icon {
+        font-size: 48px;
+      }
+    }
+    .upload_img {
+      position: relative;
+      .icon_box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        position: relative;
+        z-index: 1;
+      }
+      .file_box_item {
+        position: absolute;
+        opacity: 0;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        .file_input {
+          cursor: pointer;
+        }
+      }
+      .file_box_item_show {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+}
+</style>

src/components/MyComponents/FrameWork/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="form-item-box zk-frameWork-wrap" :style="{ width: width }">
+    <el-select
+      :model-value="frameWork"
+      :placeholder="placeholder"
+      @clear="handleClear"
+      @change="selectChange"
+      :clearable="clearable"
+      v-bind="$attrs"
+      :multiple="multiple"
+      popper-class="frameWork-select"
+    >
+      <el-option value="1" style="display: none"></el-option>
+      <el-input
+        v-if="filterable"
+        v-model="filterText"
+        style="width: 96% !important; margin: 0 2%; font-size: 12px"
+        :prefix-icon="Search"
+      />
+      <div class="alllist">
+        <el-tree
+          ref="tree"
+          :data="treeData"
+          :props="defaultConf"
+          default-expand-all
+          :filter-node-method="filterNode"
+          :show-checkbox="multiple"
+          :node-key="nodeKey"
+          @check-change="handleCheckChange"
+          @node-click="clickNode"
+        />
+      </div>
+    </el-select>
+    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
+    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { nextTick, ref, watch } from "vue";
+import { Search } from "@element-plus/icons-vue";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  clearable: {
+    default: false,
+    type: Boolean
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  filterable: {
+    default: false,
+    type: Boolean
+  },
+  treeData: {
+    default: () => [],
+    type: Array
+  },
+  placeholder: {
+    default: "选择组织机构",
+    type: String
+  },
+  defaultConf: {
+    type: Object,
+    default: () => ({
+      children: "children",
+      label: "label"
+    })
+  },
+  frameWork: {
+    type: [String, Array],
+    default: ""
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const nodeKey = "id";
+const filterText = ref("");
+const mineStatusValue = ref([]); //选中状态存贮
+nextTick(() => {
+  if (props.frameWork) {
+    if (typeof props.frameWork === "string") {
+      //传过来的默认值类型
+      if (props.frameWork) {
+        tree.value.setCheckedKeys([props.frameWork], false);
+      }
+    } else {
+      if (props.frameWork.length > 0) {
+        tree.value.setCheckedKeys(props.frameWork, false);
+      }
+    }
+    mineStatusValue.value = treeValueFind(props.treeData, props.frameWork);
+  }
+});
+const tree = ref(null);
+let deferTimer;
+watch(filterText, (val) => {
+  tree.value.filter(val);
+});
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data[props.defaultConf.label].indexOf(value) !== -1;
+};
+
+//多选选中
+const handleCheckChange = () => {
+  const res = tree.value.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点
+  mineStatusValue.value = res;
+  clearTimeout(deferTimer);
+  deferTimer = setTimeout(() => {
+    emits("handleChange", res);
+  }, 200);
+};
+//节点选择
+const clickNode = (data, node, obj) => {
+  if (props.multiple) {
+    // 多选不执行
+    const index = mineStatusValue.value.findIndex((d) => d.id === data.id);
+    if (index > -1) {
+      tree.value.setChecked(data, false);
+    } else {
+      tree.value.setChecked(data, true);
+    }
+    return;
+  }
+  if (!data.children) {
+    mineStatusValue.value.push(data.id);
+    tree.value.setCheckedKeys([data.id], false);
+  }
+};
+//select值变化
+const selectChange = (e) => {
+  if (!props.multiple || !props.treeData.length) {
+    return false;
+  }
+  const arrNew = [];
+  const dataLength = mineStatusValue.value.length;
+  const eleng = e.length;
+  for (let i = 0; i < dataLength; i++) {
+    for (let j = 0; j < eleng; j++) {
+      if (e[j] === mineStatusValue.value[i][props.defaultConf.label]) {
+        arrNew.push(mineStatusValue.value[i][nodeKey]);
+        break;
+      }
+    }
+  }
+  setTimeout(() => {
+    tree.value.setCheckedKeys(arrNew, false);
+  }, 200);
+};
+//select clear
+const handleClear = (e) => {
+  mineStatusValue.value = [];
+  tree.value.setCheckedKeys([], false);
+};
+const treeValueFind = (tree, arr, newArr = []) => {
+  if (typeof arr === "string") {
+    tree.forEach((el) => {
+      if (el[nodeKey] === arr) {
+        newArr.push(el);
+      }
+      if (el[props.defaultConf.children]) {
+        treeValueFind(el[props.defaultConf.children], arr, newArr);
+      }
+    });
+  } else {
+    for (let i = arr.length; i >= 0; i--) {
+      tree.forEach((el) => {
+        if (el[nodeKey] === arr[i]) {
+          newArr.push(el);
+          arr.splice(i, 1);
+        }
+        if (el[props.defaultConf.children] && arr.length > 0) {
+          treeValueFind(el[props.defaultConf.children], arr, newArr);
+        }
+      });
+    }
+  }
+  return newArr;
+};
+</script>
+<style lang="scss" scoped>
+.optionclass {
+  height: auto;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  overflow-y: overflow;
+}
+.zk-frameWork-wrap {
+  .el-select {
+    width: 100%;
+  }
+}
+</style>

src/components/MyComponents/FrameWork2/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-cascader
+      class="el-cascader-zj"
+      :placeholder="placeholder"
+      :options="tableData"
+      v-bind="$attrs"
+      v-model="modelValue"
+      @change="handleChange"
+      :props="endProps"
+      :filterable="filterable"
+    />
+    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
+    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { ref, defineProps, defineEmits, defineExpose,computed } from "vue";
+import { getSystemMeny } from "@/api/user-manage";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  multiple: {
+    default: false,
+    type: Boolean
+  },
+  filterable: {
+    default: false,
+    type: Boolean
+  },
+  modelValue: {
+    default: [],
+    type: Array
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const endProps = computed(() => {
+  let re = { children: 'sysMenuList', value: 'id', label: 'menuName' }
+  if (props.multiple === true) {
+    re.multiple = true;
+  }
+  return re;
+})
+const tableData = ref([]);
+const getSysMenuTree = async () => {
+  const params = {
+    menuName: "",
+    current: 1,
+    size: 999
+  }
+  const res = await getSystemMeny(params);
+  tableData.value = res?.records;
+};
+getSysMenuTree();
+
+const emits = defineEmits(["update:modelValue"]);
+const handleChange = (e) => {
+  if (props.multiple === true) {
+    const data = e.map((item) => {
+      return item[item.length - 1];
+    });
+    emits("update:modelValue", data);
+  } else {
+    const data = e ? e[e.length - 1] : ''
+    emits("update:modelValue", data);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .el-cascader-zj{
+    width: 100%;
+
+  }
+</style>

src/components/MyComponents/GzSource/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <div>
+    <el-dialog
+      :title="titleValue"
+      width="1400px"
+      :model-value="gzyModelValue"
+      @close="closed"
+    >
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="所属部门">
+          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
+        </el-form-item>
+        <el-form-item label="设备编号">
+          <el-input
+            v-model="listQuery.sbbh"
+            placeholder="请填写设备编号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="感知源名称">
+          <el-input
+            v-model="listQuery.sbmc"
+            placeholder="请填写感知源名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="感知源类型">
+          <el-select v-model="listQuery.sblx">
+            <el-option
+              v-for="item in D_BZ_SBLX"
+              :key="item"
+              :label="item.label"
+              :value="item.value"
+              >{{ item.label }}</el-option
+            >
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" style="margin-top: 0px" v-if="gzyModelValue">
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          style="width: 100%"
+          :row-key="keyid"
+          height="450"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            :reserve-selection="true"
+            v-if="props.multiple"
+          />
+          <el-table-column width="55" #default="{ row }" v-else>
+            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
+          </el-table-column>
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            sortable
+            width="80"
+          />
+          <el-table-column
+            prop="sbmc"
+            show-overflow-tooltip
+            align="center"
+            label="感知源名称"
+          />
+          <el-table-column
+            prop="sbbh"
+            show-overflow-tooltip
+            align="center"
+            label="编号"
+          />
+          <el-table-column
+            prop="dzmc"
+            show-overflow-tooltip
+            align="center"
+            label="地址"
+          />
+          <el-table-column
+            prop="sblx"
+            show-overflow-tooltip
+            align="center"
+            label="感知源类型"
+            width="120px"
+          >
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_SBLX" :value="row.sblx" :tag="false" />
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="sblxdm"
+            show-overflow-tooltip
+            align="center"
+            sortable
+            label="摄像机类型"
+            width="120px"
+          >
+            <template #default="{ row }">
+              <dict-tag
+                :options="D_BZ_GZSBLX"
+                :value="row.sblxdm"
+                :tag="false"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="ssbm"
+            show-overflow-tooltip
+            align="center"
+            sortable
+            label="所属部门"
+          />
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageNum"
+          :page-sizes="[2, 5, 10, 20]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import {
+  defineProps,
+  watch,
+  ref,
+  onMounted,
+  nextTick,
+  getCurrentInstance
+} from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_SBLX, D_BZ_GZSBLX } = proxy.$dict("D_BZ_SBLX", "D_BZ_GZSBLX");
+const props = defineProps({
+  //是否显示
+  gzyModelValue: {
+    type: Boolean,
+    required: true
+  },
+  //标题
+  titleValue: {
+    type: String,
+    default: "选择感知源"
+  },
+  //是否多选
+  multiple: {
+    default: true,
+    type: Boolean
+  },
+  //已经选中得数据回显
+  data: {
+    type: Array,
+    default: []
+  }
+});
+const keyid = (row) => {
+  return row.id;
+};
+const total = ref(0);
+const ridioIndex = ref(null);
+const listQuery = ref({
+  pageNum: 1,
+  pageSize: 20,
+  sblx: "",
+  sbmc: ""
+});
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["close", "choosedGzy"]);
+const closed = () => {
+  emits("close", false);
+};
+const reset = () => {
+  listQuery.value = {
+    pageNum: 1,
+    pageSize: 20,
+    sblx: ""
+  };
+  getListData();
+};
+const checkopenList = ref([]);
+//确认选中
+const onComfirm = () => {
+  if (props.multiple) {
+    //多选
+    const List = multipleSelectionUser.value;
+    if (List.length === 0) {
+      proxy.$message.warning("请选择感知源");
+      return;
+    }
+    emits("choosedGzy", [...List, ...checkopenList.value]);
+  } else {
+    //单选
+    if (![ridioIndex.value][0]) {
+      proxy.$message.warning("请选择感知源");
+      return;
+    }
+    const info = tableData.value.find((item) => {
+      return item.id === ridioIndex.value;
+    });
+    emits("choosedGzy", [info]);
+  }
+  closed();
+};
+onMounted(() => {
+  getListData();
+});
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageNum = currentPage;
+  getListData();
+};
+//圈层数据
+const getListData = async () => {
+  qcckPost(listQuery.value, "/mosty-jmxf/tbYsSxt/getPageList").then((res) => {
+    tableData.value = res?.records;
+    multipleUser(props.data, tableData.value);
+    total.value = Number(res.total);
+  });
+};
+const handleFilter = () => {
+  listQuery.value.pageNum = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null); //表单
+//多选选中的数据
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelectionUser.value = val;
+  if (checkopenList.value) {
+    for (let i = 0; i < multipleSelectionUser.value.length; i++) {
+      const l = multipleSelectionUser.value[i];
+      for (let j = 0; j < checkopenList.value.length; j++) {
+        const z = checkopenList.value[j];
+        if (l.id == z.id) {
+          checkopenList.value.splice(j, 1);
+        }
+      }
+    }
+  }
+};
+
+const deweighThree = (arr) => {
+  let map = new Map();
+  for (let item of arr) {
+    if (!map.has(item.id)) {
+      map.set(item.id, item);
+    }
+  }
+  return [...map.values()];
+};
+//回显
+function multipleUser(row, list) {
+  if (row) {
+    row.forEach((item) => {
+      list.forEach((select) => {
+        let val = item.id ? item.id : item;
+        if (val == select.id) {
+          if (multipleUserRef.value) {
+            multipleUserRef.value.toggleRowSelection(select, true);
+          }
+        }
+      });
+    });
+  }
+}
+
+watch(
+  () => props.gzyModelValue,
+  (val) => {
+    if (val === true) {
+      handleFilter();
+    }
+  }
+);
+
+watch(
+  () => props.data,
+  (val) => {
+    if (multipleUserRef.value) multipleUser(val, tableData.value);
+    checkopenList.value = JSON.parse(JSON.stringify(val));
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+::v-deep .el-form--inline {
+  padding-left: 0 !important;
+}
+::v-deep .el-radio__label {
+  display: none;
+}
+</style>
+

src/components/MyComponents/IdentityCard/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="form-item-box"
+    :style="{ width: width}"
+  >
+    <el-input
+      :placeholder="placeholder"
+      v-bind="$attrs"
+      v-model="modelValue"
+      @input="onInput"
+    ></el-input>
+    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
+    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { defineProps, defineEmits } from "vue";
+const props = defineProps({
+  placeholder: {
+    default: "请输入身份证号",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const onInput = (e) => {
+  emits("update:modelValue", e);
+};
+</script>

src/components/MyComponents/MarkdownEdit/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="markdown-wrap">
+    <!---->
+    <div id="markdown-box">
+      <strong v-html="modelValue"></strong>
+    </div>
+    <div style="margin-top: 1vw">
+      <el-link type="primary" @click="saveEdit('detail', row)">确定详情信息</el-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MKEditor from "@toast-ui/editor";
+import "@toast-ui/editor/dist/toastui-editor.css";
+import "@toast-ui/editor/dist/i18n/zh-cn.js";
+
+import { COMPONENT_WIDTH } from "@/constant";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  onMounted,
+  watch
+} from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写手机号",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: "800px",
+    type: String
+  }
+});
+let mkEditor;
+let el;
+onMounted(() => {
+  el = document.querySelector("#markdown-box");
+  initEditor();
+});
+const emits = defineEmits(["update:modelValue"]);
+const initEditor = () => {
+  mkEditor = new MKEditor({
+    el,
+    height: "700px",
+    previewStyle: "vertical",
+    language: "zh-CN",
+    initiaValue:props.modelValue
+  });
+  mkEditor.getMarkdown();
+};
+const saveEdit = () => {
+  emits("update:modelValue", mkEditor.getHTML());
+};
+const onInput = (e) => {
+  emits("update:modelValue", e);
+};
+//回显
+</script>
+
+<style lang="scss" scoped>
+.markdown-wrap {
+}
+</style>

src/components/MyComponents/Other/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-input :placeholder="placeholder" v-bind="$attrs" v-model="modelValue" @input="onInput" ></el-input>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, defineExpose } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const onInput = (e) => {
+  emits("update:modelValue", e);
+};
+</script>
+

src/components/MyComponents/PackageSelect/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="form-item-box zj-packageSelect-wrap" :style="{ width: width }">
+    <el-select v-bind="$attrs" :model-value="modelValue" @change="hanlderSelect"
+      :popper-class="selectOption.length > 20 ? 'nation-select' : ''" :placeholder="placeholder">
+      <el-option v-for="item in selectOption" :key="item.dm" :label="item.zdmc" :value="item.dm">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { nextTick, onBeforeMount, ref } from "vue";
+import { getDictInfoByDictEnum } from "@/api/sysDict";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  dictEnum: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const selectOption = ref([]);
+onBeforeMount(async () => {
+  const res = await getDictInfoByDictEnum({ dictElementEnum: props.dictEnum });
+  //正常下拉结构
+  if (res.zdlx === 1) {
+    selectOption.value = [...res.itemList];
+  } else {
+    //树形结构数据
+  }
+});
+const hanlderSelect = (data) => {
+  emits("handleChange", data);
+};
+</script>
+
+<style lang="scss" scoped>
+.zj-packageSelect-wrap {
+  ::v-deep .el-select {
+    width: 100%;
+  }
+}
+</style>

src/components/MyComponents/Phone/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-input :placeholder="placeholder" v-bind="$attrs" v-model="modelValue" @input="onInput" ></el-input>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { ref, defineProps, defineEmits, defineExpose } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写手机号",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const onInput = (e) => {
+  emits("update:modelValue", e);
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/MyComponents/Provinces/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="form-item-box">
+    <el-select v-model="province" clearable placeholder="请选择省份">
+      <el-option v-for="item in areas" :value="item.code" :label="item.name" :key="item.code">{{ item.name }}
+      </el-option>
+    </el-select>
+    <el-select clearable :disabled="!province" style="margin: 0 10px" v-model="city" placeholder="请选择城市">
+      <el-option v-for="item in selectCity" :value="item.code" :label="item.name" :key="item.code">{{ item.name }}
+      </el-option>
+    </el-select>
+    <el-select clearable :disabled="!province || !city" v-model="area" placeholder="请选择区域">
+      <el-option v-for="item in selectArea" :value="item.code" :label="item.name" :key="item.code">{{ item.name }}
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import allAreas from "@/constant/pca-code.json";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  computed,
+  watch
+} from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择省市区",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  }
+});
+
+let province = ref("");
+let city = ref("");
+let area = ref("");
+let areas = ref(allAreas);
+
+let selectCity = ref([]);
+let selectArea = ref([]);
+//分发事件给父组件
+//分发事件给父组件
+const emits = defineEmits(["update:modelValue"]);
+//监听省份变化
+watch(
+  () => province.value,
+  (val) => {
+    if (val) {
+      let cities = areas.value.find(
+        (item) => item.code === province.value
+      )?.children;
+      selectCity.value = cities;
+    }
+    city.value = "";
+    area.value = "";
+  }
+);
+
+//监听城市变化
+watch(
+  () => city.value,
+  (val) => {
+    if (val) {
+      let area = selectCity.value.find(
+        (item) => item.code === city.value
+      )?.children;
+      selectArea.value = area;
+    }
+    area.value = "";
+  }
+);
+
+//监听区域变化
+watch(
+  () => area.value,
+  (val) => {
+    let provinceData = {
+      code: province.value,
+      name:
+        province.value &&
+        allAreas.find((item) => item.code === province.value).name
+    };
+    let cityData = {
+      code: city.value,
+      name:
+        city.value &&
+        selectCity.value &&
+        selectCity.value.find((item) => item.code === city.value).name
+    };
+    let areaData = {
+      code: val,
+      name:
+        val &&
+        selectArea.value &&
+        selectArea.value.find((item) => item.code === val).name
+    };
+    emits("update:modelValue", `${provinceData},${cityData},${areaData}`);
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/MyComponents/Provinces2/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-cascader class="el-cascader-zj" :props="{ value: 'label', label: 'label', children: 'children' }"
+      :options="arercity" expand-trigger="hover" change-on-select @change="onInChange" :placeholder="placeholder"
+      v-bind="$attrs" v-model="value"></el-cascader>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import allAreas from "./provicesData";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  computed,
+  nextTick,
+  watch
+} from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择地区位置",
+    type: String
+  },
+
+  provinces2: {
+    default: () => [],
+    type: Array
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const value = ref([]);
+
+nextTick(() => {
+  if (props.provinces2.length > 0) {
+    init(props.provinces2);
+  }
+});
+
+const init = (data) => { };
+const registerAddress = ref([]);
+
+const arercity = ref(allAreas);
+const emits = defineEmits(["update:provinces2"]);
+const onInChange = (e) => {
+  emits("update:provinces2", e);
+};
+// const onInput = (e) => {
+//   emits("update:provinces2", e);
+// };
+</script>
+
+<style lang="scss" scoped>
+.el-cascader-zj {
+  width: 100%;
+}
+</style>

src/components/MyComponents/RichOnly/index.vue

@@ -0,0 +1,280 @@
+<template>
+  <div>
+    <el-dialog
+      :title="titleValue"
+      width="1400px"
+      :model-value="modelValue"
+      @close="closed"
+    >
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="所属部门">
+          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
+        </el-form-item>
+        <el-form-item label="圈层名称">
+          <el-input
+            v-model="listQuery.qcmc"
+            placeholder="请输入圈层名称"
+            clearable
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" style="margin-top: 0px" v-if="modelValue">
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          style="width: 100%"
+          :row-key="keyid"
+          height="450"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            :reserve-selection="true"
+            v-if="props.multiple"
+          />
+          <el-table-column width="55" #default="{ row }" v-else>
+            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
+          </el-table-column>
+          <el-table-column
+            label="序号"
+            type="index"
+            align="center"
+            sortable
+            width="80"
+          />
+          <el-table-column
+            sortable
+            prop="ssbm"
+            label="所属部门"
+            show-overflow-tooltip
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="qcmc"
+            show-overflow-tooltip
+            label="圈层名称"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="qclx"
+            show-overflow-tooltip
+            label="圈层类型"
+            align="center"
+          >
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_QCLX" :value="row.qclx" :tag="false" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="qcjb"
+            show-overflow-tooltip
+            label="圈层等级"
+            align="center"
+          >
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_QCDJ" :value="row.qcjb" :tag="false" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[2, 5, 10, 20]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import {
+  defineProps,
+  watch,
+  ref,
+  onMounted,
+  nextTick,
+  getCurrentInstance
+} from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_QCLX, D_BZ_QCDJ } = proxy.$dict("D_BZ_QCLX", "D_BZ_QCDJ");
+const props = defineProps({
+  //是否显示
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  //标题
+  titleValue: {
+    type: String,
+    default: "选择圈层"
+  },
+  //是否多选
+  multiple: {
+    default: true,
+    type: Boolean
+  },
+  //已经选中得数据回显
+  data: {
+    type: Array,
+    default: []
+  }
+});
+const keyid = (row) => {
+  return row.id;
+};
+const total = ref(0);
+const ridioIndex = ref(null);
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  qcmc: "",
+  ssbmdm: ""
+});
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["close", "choosedQc"]);
+const closed = () => {
+  emits("close", false);
+};
+const reset = () => {
+  listQuery.value = {
+    pageCurrent: 1,
+    pageSize: 20,
+    qcmc: "",
+    ssbmdm: ""
+  };
+  getListData();
+};
+//确认选中
+const onComfirm = () => {
+  if (props.multiple) {
+    //多选
+    const List = JSON.parse(JSON.stringify(multipleSelectionUser.value));
+    if (List.length === 0) {
+      proxy.$message.warning("请选择圈层");
+      return;
+    }
+    emits("choosedQc", List);
+  } else {
+    //单选
+    if (![ridioIndex.value][0]) {
+      proxy.$message.warning("请选择圈层");
+      return;
+    }
+    const info = tableData.value.find((item) => {
+      return item.id === ridioIndex.value;
+    });
+    emits("choosedQc", [info]);
+  }
+  closed();
+};
+onMounted(() => {
+  getListData();
+});
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageSize = currentPage;
+  getListData();
+};
+//圈层数据
+const getListData = async () => {
+  qcckGet(listQuery.value, "/mosty-jmxf/qc/selectQcList").then((res) => {
+    tableData.value = res?.records;
+    multipleUser(props.data, tableData.value);
+    total.value = Number(res.total);
+  });
+};
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null); //表单
+//多选选中的数据
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelectionUser.value = val;
+};
+//回显
+function multipleUser(row, list) {
+  if (row) {
+    if (props.multiple) {
+      row.forEach((item) => {
+        list.forEach((select) => {
+          if (item.id == select.id) {
+            if (multipleUserRef.value) {
+              multipleUserRef.value.toggleRowSelection(select, true);
+            }
+          }
+        });
+      });
+    }
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === true) {
+      handleFilter();
+    }
+  }
+);
+
+watch(
+  () => props.data,
+  (val) => {
+    if (multipleUserRef.value) multipleUser(val, tableData.value);
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+::v-deep .el-form--inline {
+  padding-left: 0 !important;
+}
+::v-deep .el-radio__label {
+  display: none;
+}
+</style>
+

src/components/MyComponents/Select/index.vue

@@ -0,0 +1,49 @@
+
+<template>
+  <div class="Select-wrap" :style="{ width: width }">
+    <el-select :disabled="props.disabled" v-bind="$attrs" v-model="modelValue" @change="hanlderSelect" :popper-class="selectOption.length > 20 ? 'nation-select' : ''" :placeholder="placeholder">
+      <el-option v-for="item in dictEnum" :key="item.value" :label="item.zdmc || item.label" :value="item.dm || item.value">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script setup>
+import { nextTick, onBeforeMount, ref } from "vue";
+const emits = defineEmits(["change"]); //子组件向父组件事件传递
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  disabled:{
+    default: false,
+    type: Boolean
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  dictEnum: {
+    default: Array,
+    type: String
+  },
+  width: {
+    default: '100%',
+    type: String
+  }
+});
+const selectOption = ref([]);
+
+const hanlderSelect = (data) => {
+  emits("change", data);
+};
+</script>
+
+<style lang="scss" scoped>
+.Select-wrap {
+  ::v-deep .el-select {
+    width: 100%;
+  }
+}
+</style>

src/components/MyComponents/Sex/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-select :disabled="disabled" v-model="sex" placeholder="请选择性别" @change="onChange">
+      <el-option
+        v-for="item in D_BZ_XB"
+        :key="item"
+        :label="item.zdmc"
+        :value="item.dm"
+      ></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  defineExpose,
+  getCurrentInstance,
+  onBeforeMount
+} from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
+const props = defineProps({
+  //获取组件传值
+  sex: {
+    type: String,
+    default: ""
+  },
+  disabled:{
+    type:Boolean,
+    default:false
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const emits = defineEmits(["update:sex"]);
+const onChange = (e) => {
+  emits("update:sex", e);
+};
+</script>
+
+<style lang="scss" scoped>
+.manIcon,
+.womanIcon {
+  font-size: 30px;
+}
+</style>

src/components/MyComponents/StationSelect/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="form-item-box zj-packageSelect-wrap" :style="{ width: width }">
+    <el-select v-bind="$attrs" :model-value="modelValue" @change="hanlderSelect" :popper-class="selectOption.length > 20 ? 'nation-select' : ''">
+      <el-option v-for="item in selectOption" :key="item.id" :label="item.postName" :value="item.id">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script setup>
+import { COMPONENT_WIDTH } from '@/constant';
+import { onBeforeMount, ref } from "vue";
+import { selectJobPage } from "@/api/user-manage";
+const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请选择",
+    type: String
+  },
+  modelValue: {
+    default: "",
+    type: String
+  },
+  dictEnum: {
+    default: "",
+    type: String
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+const selectOption = ref([]);
+onBeforeMount(async () => {
+  const res = await selectJobPage({ page: 1, size: 9999 });
+  selectOption.value = [...res.records];
+});
+const hanlderSelect = (data) => {
+  emits("handleChange", data);
+};
+</script>
+
+<style lang="scss" scoped>
+.zj-packageSelect-wrap {
+  ::v-deep .el-select {
+    width: 100%;
+  }
+}
+</style>

src/components/MyComponents/Upload/index.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-upload v-bind="$attrs" :headers="headers" :multiple="false" class="avatar-uploader" :limit="props.limit"
+      :action="actionUrl" list-type="picture-card" :file-list="fileList" show-file-list :on-exceed="handleExceed"
+      :on-success="handlerSuccess" :before-upload="beforeImgUpload">
+      <template #default>
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </template>
+      <template #file="{ file }">
+        <div v-if="props.isImg">
+          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+          <span class="el-upload-list__item-actions">
+            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+              <el-icon><zoom-in /></el-icon>
+            </span>
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </span>
+          </span>
+        </div>
+        <div v-else>
+          <div class="file-wrap">
+            <span>
+              <svg-icon :icon="getSuffix(file.name)" />
+            </span>
+            <span class="file-name">{{ file.name }}</span>
+          </div>
+          <span class="el-upload-list__item-actions">
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+              <el-icon>
+                <Download />
+              </el-icon>
+            </span>
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </span>
+          </span>
+        </div>
+      </template>
+    </el-upload>
+    <el-dialog v-model="dialogVisible">
+      <img style="width: 100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, defineExpose, computed, watch, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import type from "element-plus/es/components/upload/src/upload.type";
+import { useStore } from "vuex";
+const props = defineProps({
+  //获取组件传值
+  modelValue: {
+    type: Array,
+    default: []
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  isImg: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  }
+});
+
+const actionUrl = computed(() =>
+  props.isImg ? "/mosty-base/minio/image/upload/id" : "/mosty-base/minio/file/upload"
+);
+
+const emits = defineEmits(["update:modelValue", "handleChange"]);
+
+//获取后缀
+const getSuffix = (fileName) => {
+  let suffix = "";
+  try {
+    suffix = fileName.substr(fileName.lastIndexOf(".") + 1, 4); //截取最后一个点号后4个字符
+  } catch (err) {
+    suffix = "";
+    return "OTHER";
+  }
+  // fileName无后缀返回 false
+  if (!suffix) return "";
+
+  // 图片格式
+  var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
+  if (imglist.includes(suffix)) return "IMG";
+
+  //txt
+  if (suffix === "txt") return "TXT";
+
+  //excel XLS
+  const excelist = ["xls", "xlsx"];
+  if (excelist.includes(suffix)) return "XLS";
+
+  // 匹配 word
+  var wordlist = ["doc", "docx"];
+  if (wordlist.includes(suffix)) return "DOC";
+
+  //pdf
+  if (suffix === "pdf") return "PDF";
+
+  //视频 音频
+  var videolist = ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"];
+  if (videolist.includes(suffix)) return "VIDEO";
+
+  var musiclist = ["mp3", "wav", "wmv"];
+  if (musiclist.includes(suffix)) return "MUSIC";
+
+  var pptlist = ["ppt", "pptx"];
+  if (pptlist.includes(suffix)) return "PPT";
+
+  //压缩包
+  var yslist = ["7z", "rar", "zip", "apz", "ar", "hpk", "hyp", "hbc2"];
+  if (yslist.includes(suffix)) return "YS";
+
+  //否则返回other
+  return "OTHER";
+};
+
+const imageUrl = ref("");
+const store = useStore();
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const disabled = ref(false);
+const headers = ref({
+  Authorization: store.getters.token
+});
+
+const propsModelValue = ref()
+const fileList = ref([]);
+watch(() => props.modelValue, (val) => {
+  console.log(val,"xxxxxxxxxxx");
+  if (Array.isArray(val)) {
+    propsModelValue.value=val
+  } else {
+  propsModelValue.value = val ? val.split(',') : []
+  }
+  if (propsModelValue.value) {
+    fileList.value = propsModelValue.value.map((el) => {
+      return { url: `/mosty-base/minio/image/download/` + el };
+    });
+  }
+},{deep:true,immediate:true});
+
+onMounted(() => {
+  // 初始化数据
+  // if (propsModelValue.value) {
+  //   fileList.value = propsModelValue.value.map((el) => {
+  //     return { url: `/mosty-base/minio/image/download/` + el };
+  //   });
+  // }
+});
+
+
+const handlerSuccess = (res, file) => {
+  file.url = `/mosty-base/minio/image/download/` + res.data;
+  fileList.value.push(file);
+  if (Array.isArray(propsModelValue.value)) {
+    propsModelValue.value.push(res.data);
+  } else {
+    propsModelValue.value =propsModelValue.value? propsModelValue.value.split(','):[]
+    propsModelValue.value.push(res.data);
+  }
+
+  console.log( propsModelValue.value);
+  emits("update:modelValue", propsModelValue.value.toString());
+  // emits("handleChange", propsModelValue.value);
+};
+const handlePreview = (file) => { };
+const handleExceed = (files, fileList) => {
+  ElMessage.warning(`限制，只能上传${props.limit}个文件或图片`);
+};
+
+const beforeImgUpload = (file) => {
+  if (props.isImg) {
+    let isIMG = false;
+    if (getSuffix(file.name) === "IMG") {
+      isIMG = true;
+    }
+    const isLt5M = file.size / 1024 / 1024 < 5;
+    if (!isIMG) {
+      ElMessage.error("上传图片只能是jpg/png/jpeg/bmp/gif格式!");
+    }
+    if (!isLt5M) {
+      ElMessage.error("上传图片大小不能超过 5MB!");
+    }
+    return isIMG && isLt5M;
+  } else {
+    return true;
+  }
+};
+const handleAvatarSuccess = (res, file) => {
+  imageUrl.value = URL.createObjectURL(file.raw);
+};
+//查询图片
+const handlePictureCardPreview = (file) => {
+  dialogImageUrl.value = file.url;
+  dialogVisible.value = true;
+};
+const handleDownload = (file) => {
+  console.log(file);
+
+  // window.open(file.response.data);
+  window.open(file);
+};
+const handleRemove = (file) => {
+  let index = fileList.value.findIndex(function (item) {
+    return item.url === file.url;
+  });
+  fileList.value.splice(index, 1);
+  propsModelValue.value.splice(index, 1);
+  // emits("handleChange", propsModelValue.value);
+  emits("update:modelValue",  propsModelValue.value.toString());
+};
+watch(
+  () => props.modelValue,
+  (val) => {
+    let arr = val ? val : [];
+if(Array.isArray(arr)){
+  if (arr && arr.length > 0) {
+      fileList.value = arr.map((el) => {
+        return { url: `/mosty-base/minio/image/download/` + el };
+      });
+    }
+}else{
+arr.split(",").map(item=>{
+  return { url: `/mosty-base/minio/image/download/` + item };
+})
+}
+
+
+
+
+
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.avatar-uploader {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+
+.file-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  ::v-deep .svg-icon {
+    font-size: 48px;
+    margin: 28px 0 2px 0;
+  }
+
+  .file-name {
+    width: 88%;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+    overflow: hidden;
+    /*将对象作为弹性伸缩盒子模型显示*/
+    display: -webkit-box;
+    /*设置子元素排列方式*/
+    -webkit-box-orient: vertical;
+    /*设置显示的行数，多出的部分会显示为...*/
+    -webkit-line-clamp: 2;
+  }
+}
+
+::v-deep .el-upload-list--picture-card {
+  display: flex;
+  align-items: center;
+  padding-top: 7px;
+  box-sizing: border-box;
+}
+</style>

src/components/MyComponents/choosePolice/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-dialog
+    :title="props.PoliceType == 'MJ' ? '选择民警' : '选择辅警'"
+    width="1400px"
+    :model-value="modelValue"
+    @close="closed"
+  >
+    <div>
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="所属部门">
+          <MOSTY.Department
+            width="100%"
+            clearable
+            v-model="listQuery.ssbmdm"
+          />
+        </el-form-item>
+        <el-form-item label="姓名">
+          <el-input
+            placeholder="请输入姓名"
+            v-model="listQuery.xm"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="身份证号码">
+          <el-input
+            placeholder="请输入身份证号码"
+            v-model="listQuery.sfzh"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="tabBox" :class="props.Single?'tabBoxRadio':''" style="margin-top: 0px">
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          style="width: 100%"
+          height="450"
+        >
+          <el-table-column type="selection" width="55"/>
+          <el-table-column
+            prop="xm"
+            align="center"
+            :label="PoliceType == 'MJ' ? '民警姓名' : '辅警姓名'"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="sfzh"
+            show-overflow-tooltip
+            align="center"
+            label="身份证号码"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ssbm"
+            label="所属部门"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="jh"
+            label="警号"
+            align="center"
+          ></el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.pageCurrent"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+
+import { getTbJcglXfll } from "@/api/xfll";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleId: {
+    type: String,
+    default: ""
+  },
+  PoliceType: {
+    type: String,
+    default: ""
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: false
+  }
+});
+const total = ref(0);
+const listQueryDefault = ref({})
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 20,
+  ssbmdm:'',
+  sfzh:''
+});
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedPolice"]);
+onMounted(()=>{
+  listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value))
+  handleFilter()
+})
+
+// 查询
+function handleFilter () {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+// 列表
+function getListData () {
+  const params = listQuery.value;
+  if (props.roleId) params.roleId = props.roleId;
+  let lx = props.PoliceType
+  params.fl = lx =='MJ'?'01': lx =='FJ'?'02':''
+  tableData.value = [];
+  getTbJcglXfll(params).then((res)=>{
+    tableData.value = res?.records;
+    total.value = Number(res.total);
+  });
+};
+// 多选
+function handleSelectionChange (val){
+  if(props.Single){
+    if(val.length>1){
+      let del_row = val.shift()
+      multipleUserRef.value.toggleRowSelection(del_row,false)
+    }
+    multipleSelectionUser.value = val;
+  }else{
+    multipleSelectionUser.value = val;
+  }
+  
+};
+
+
+// 确定按钮
+function onComfirm() {
+  const userList = multipleSelectionUser.value
+  let params = {userList: userList,type: props.PoliceType};
+  if (props.Single) {
+    emits("choosedPolice", userList);
+  } else {
+    emits("choosedPolice", params);
+  }
+  closed();
+};
+
+// 关闭弹窗
+function closed() {
+  emits("update:modelValue", false);
+};
+
+// 重置弹窗
+function reset() {
+  listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
+  getListData();
+};
+
+// pageSize 改变触发
+function handleSizeChange(currentSize){
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+function handleCurrentChange (currentPage) {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+
+
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner{
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox{
+  display: none;
+}
+</style>

src/components/MyComponents/index.js

@@ -0,0 +1,42 @@
+import AddressSelect from "./AddressSelect/index.vue";
+import FrameWork from "./FrameWork/index.vue";
+import FrameWork2 from "./FrameWork2/index.vue";
+import Phone from "./Phone/index.vue";
+import IdentityCard from "./IdentityCard/index.vue";
+import PackageSelect from "./PackageSelect/index.vue";
+import Email from "./Email/index.vue";
+import Other from "./Other/index.vue";
+import Sex from "./Sex/index.vue";
+import Select from "./Select/index.vue";
+import Upload from "./Upload/index.vue";
+import Department from "./Department/index.vue";
+import DepartmentTree from "./DepartmentTree/index.vue";
+import ChooseIcon from "./ChooseIcon/index.vue";
+import StationSelect from "./StationSelect/index.vue";
+import Provinces from "./Provinces2/index.vue";
+import MarkdownEdit from "./MarkdownEdit/index.vue";
+import FileUpload from "./FileUpload/index.vue";
+import Date from "./Date/index.vue";
+import Empty from "./Empty/index.vue";
+export {
+  AddressSelect,
+  FrameWork,
+  Phone,
+  IdentityCard,
+  PackageSelect,
+  Email,
+  Other,
+  Sex,
+  Select,
+  Upload,
+  FrameWork2,
+  Department,
+  DepartmentTree,
+  ChooseIcon,
+  StationSelect,
+  Provinces,
+  MarkdownEdit,
+  FileUpload,
+  Date,
+  Empty
+};