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

<template>
  <div>
    <el-dialog title="巡防内容" width="1400px" v-model="modelValue" 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.key" placeholder="请输入关键字" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="handleFilter">查询</el-button>
            <el-button type="info" @click="resetModel"> 重置 </el-button>
            <el-button type="success" @click="modelValueAdd = true">新增模板</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 prop="nr" label="内容" />
            <el-table-column label="操作" width="70">
              <template #default="{ row }">
                <el-icon style="margin:0 4px;" @click="editForm(row)"><Document/></el-icon>
                <el-icon @click="deleteForm([row.id])"><Delete/></el-icon>
              </template>
            </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 style="text-align:center;">
          <el-button @click="closed">取消</el-button>
          <el-button type="primary" @click="onComfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增模板 -->
    <el-dialog 
      :title="mbTitle" 
      width="500px" 
      :destroy-on-close="true"
      v-model="modelValueAdd"
      append-to-body 
      @close="closeAddModel">
        <el-form ref="elformAdd" :model="addForm" :rules="rules" class="mosty-from-wrap" :inline="true">
                <el-form-item prop="type" label="模板类型" style="width:100%">
        <el-select v-model="addForm.type" style="width:100%">
          <el-option
            v-for="item in D_ZFNR_MBLX"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
          <el-form-item label="内容" style="width:100%" prop="nr">
            <el-input v-model="addForm.nr" style="width:100%" type="textarea" placeholder="请输入内容" clearable />
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button @click="closeAddModel">取消</el-button>
          <el-button type="primary" @click="onComfirmAdd">确认</el-button>
        </div>
    </el-dialog>
  </div>
</template> 

<script setup>
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, getCurrentInstance, reactive } from "vue";
const { proxy } = getCurrentInstance();
const { D_ZFNR_MBLX } = proxy.$dict("D_ZFNR_MBLX");

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleIds: {
    type: Array,
    default: []
  },// 回显
   //是否单选 
  Single: {
    type: Boolean,
    default: false
  },
  //模板类型
  type:{
        type: String,
    default: ''
  }
});
  
const mbTitle =ref('新增模板')
const modelValueAdd = ref(false)
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
});
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);
};
const elformAdd = ref()
const addForm = ref({ nr:''})
const rules = reactive({
    type: [{ required: true, message: "请选择模板类型",  trigger: "blur" }],
    nr: [{ required: true, message: "请输入内容",  trigger: "blur" }],
})
onMounted(()=>{
  handleFilter();
})

// 取消新增模板
const closeAddModel = ()=>{
  modelValueAdd.value = false;
  addForm.value.nr = ''; 
  mbTitle.value = '新增模板'
}
// 编辑
const editForm = (row)=>{
  modelValueAdd.value = true
  mbTitle.value = '编辑模板'
  addForm.value = {...row}
}

// 删除模板
const deleteForm = (row)=>{
   proxy.$confirm("确定要删除模板", "警告", {type: "warning"}).then(() => {
    qcckPost(row,'/mosty-jmxf/tbJcglXfNrmb/bacth').then(() => {
      proxy.$message({type: "success", message: "删除成功" });
      listQuery.value.pageCurrent = 1;
      handleFilter();
    });
    }).catch(() => {
      proxy.$message.info("已取消");
  });
}

// 提交新增模板
const onComfirmAdd = ()=>{
  elformAdd.value.validate((valid)=>{
    if(!valid) return false;
    if(mbTitle.value == '新增模板'){
      qcckPost(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
        closeAddModel()
        handleFilter();
        proxy.$message({type: "success", message: "新增成功"});
      })
    }else{
      qcckPut(addForm.value,'/mosty-jmxf/tbJcglXfNrmb').then(res=>{
        closeAddModel()
        handleFilter();
        proxy.$message({type: "success", message: "编辑成功"});
      })
    }
  })
}

// 分页
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};

// 获取列表
const getListData = async () => {
   let params = {
    pageCurrent:listQuery.value.pageCurrent,
    pageSize:listQuery.value.pageSize,
    nr:listQuery.value.key,
    type:props.type
  }
  qcckGet(params,'/mosty-jmxf/tbJcglXfNrmb').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 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 resetModel = () => {
  listQuery.value = { pageCurrent: 1, pageSize: 20 };
  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("choosedList", 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>