ba_web/src/components/MyComponents/ChooseJz/ZnzbLoad.vue

<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>