lz_web_qwgl/src/components/DanLoding/jczLoad.vue

<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="success" @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 { JczSelectJczList } from "@/api/lzjcz/index.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
  JczSelectJczList(listQuery.value).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>