sgxt_web/src/views/backOfficeSystem/IntelligentControl/myControl/components/addBkdx.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">布控对象</span>
      <div>
        <el-button size="small" type="primary" v-if="!disabled" :loading="loading" @click="submit">保存</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
        <el-form :model="listQuery" :rules="rules" :disabled="disabled" ref="elform" inline :label-width="100" label-position="left">
            <div class="smallTitle">布控信息</div>
            <el-form-item prop="bkBt" label="布控标题">
                <MOSTY.Other v-model="listQuery.bkBt" placeholder="请输入布控标题" clearable />
            </el-form-item>
            <el-form-item prop="bkDx" label="布控对象">
                <MOSTY.Select v-model="listQuery.bkDx" @change="shangeDx" :dictEnum="props.dic.D_GS_BK_DX" placeholder="请选择布控对象" clearable />
            </el-form-item>
            <div class="ww100 mt10 mb10">
                <el-button type="primary" @click="handleAddPeo" v-if="!disabled">
                    <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
                    <span style="vertical-align: middle">新增</span>
                </el-button>
            </div>
            <div class="relative ww100">
                <MyTable
                    :tableData="listQuery.bkdxList"
                    :tableColumn="tableDate.tableColumn"
                    :tableHeight="tableDate.tableHeight"
                    :key="tableDate.keyCount"
                    :tableConfiger="tableDate.tableConfiger"
                    :controlsWidth="tableDate.controlsWidth"
                    >
                    <template #fjZp="{row}">
                        <el-image :src="row.fjZp"></el-image>
                    </template>
                    <template #ryXb="{ row }">
                        <DictTag :tag="false" :value="row.ryXb" :options="props.dic.D_BZ_XB" />
                    </template>
                    <template #bqList="{ row }">
                        <span v-if="row.bqList">
                            <span v-for="(it,idx) in row.bqList" :key="idx"> {{ it.bqMc }}、</span>
                        </span>
                    </template>
                    <!-- 操作 -->
                    <template #controls="{ row }">
                        <el-link type="primary" >查看档案</el-link>
                        <el-link type="danger" @click="deleteRow(row)">删除</el-link>
                    </template>
                </MyTable>
            </div>

            <div class="smallTitle">布控范围</div>
            <div class="ww100 relative mb10" style="height: 250px;border: 1px solid #dcdfe6;border-radius: 4px;overflow: hidden;">
                <div class="absolute mapSearch flex">
                    <MOSTY.Select v-model="listQuery.bkqyList" filterable multiple :dictEnum="bkqyArr" style="width:350px" placeholder="请选择布控范围" clearable />
                    <el-button type="primary" class="ml10" v-if="!disabled">
                        <el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
                        <span style="vertical-align: middle">添加范围模型</span>
                    </el-button>
                </div>
                <GdMap></GdMap>
            </div>
            <el-form-item prop="bkBt" label="布控要素" style="width: 100%;">
                <div class="flex align-center">
                    <el-button @click="listQuery.bkYz = it.dm" :type="listQuery.bkYz == it.dm ? 'primary':''" v-for="it in props.dic.D_GS_BK_BKYS" :key="it">{{ it.zdmc }}</el-button>
                </div>
            </el-form-item>
            <div style="width: 100%;" class="mt10">
                <el-form-item prop="bkSjKs" label="布控开始时间" label-width="120px">
                    <MOSTY.Date v-model="listQuery.bkSjKs" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择布控开始时间" clearable />
                </el-form-item>
                <el-form-item prop="bkSjJs" label="布控结束时间" label-width="120px" >
                    <MOSTY.Date v-model="listQuery.bkSjJs" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择布控结束时间" clearable />
                </el-form-item>
            </div>
            <div style="width: 100%;" class="mt10">
                <el-form-item prop="czYq" label="处置要求" >
                    <MOSTY.Select v-model="listQuery.czYq" :dictEnum="props.dic.D_GS_BK_CZYQ" placeholder="请选择处置要求" clearable />
                </el-form-item>
                <el-form-item prop="bkDj" label="布控级别" >
                    <MOSTY.Select v-model="listQuery.bkDj" :dictEnum="props.dic.D_GS_BK_DJ" placeholder="请选择布控级别" clearable />
                </el-form-item>
            </div>
            <div style="width: 100%;" class="mt10">
                <el-form-item prop="bkSy" label="布控事由" style="width: 100%;">
                   <MOSTY.Other v-model="listQuery.bkSy" placeholder="请输入布控事由" type="textarea" style="width: 100%;" clearable />
                </el-form-item>
            </div>
            <div style="width: 100%;" class="mt10">
                <el-form-item prop="kbfj" label="上传附件" style="width: 100%;">
                    <div>
                        <MOSTY.Upload  :limit="10" v-model="listQuery.kbfj" :key="1" />
                        <div>支持png、jpg、pdf文件上传</div>
                    </div>
                </el-form-item>
            </div>

            <div class="smallTitle">审批信息</div>
            <el-form-item prop="czjsdw" label="处置接收单位" style="width: 100%;">
                <div class="flex align-center ww100">
                    <MOSTY.Department v-model="listQuery.czJsdwdm" style="width:260px;margin-right: 10px;" placeholder="请选择处置要求" clearable />
                    <el-radio-group v-model="listQuery.dwlx" class="flex align-center">
                        <el-radio :label="it.dm" v-for="(it,idx) in props.dic.D_GS_BK_CZJSDWLX" :key="idx">{{ it.zdmc }}</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <div class="ww100 mt10 mb20">
                <el-form-item prop="bkTjfs" label="提醒方式">
                    <el-radio-group v-model="listQuery.bkTjfs" class="flex align-center">
                        <el-radio :label="it.dm" v-for="(it,idx) in props.dic.D_GS_BK_TJFS" :key="idx">{{ it.zdmc }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="bkSjQs" label="签收时间">
                    <MOSTY.Date v-model="listQuery.bkSjQs" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择签收时间" clearable />
                </el-form-item>
            </div>
            <div class="ww100">
                <el-steps direction="vertical" :active="listQuery.wccz" space="500" finish-status="success">
                    <el-step title="发起申请" >
                        <template #description>
                            <div class="flex align-center ww100 mt10 mb20">
                                <el-input v-model="listQuery.bkfqrXm" readonly class="ww20"></el-input>
                                <el-input v-model="listQuery.bkfqrSsbmmc" readonly class="ww20 ml10 mr10"></el-input>
                                <span class="f12" style="color: #333333;"> 备注发起人和部门根据登陆人自动填写</span>
                            </div>
                        </template>
                    </el-step>
                    <el-step title="审核确认" >
                        <template #description>
                            <div class="flex align-center ww100 mt10 mb20 depBox">
                                 <span class="mr4">审核部门 : </span>
                                 <MOSTY.Department v-model="listQuery.bkshrSsbmdm" clearable :placeholder="listQuery.bkshrSsbmmc ? listQuery.bkshrSsbmmc : '' "  />
                            </div>
                        </template>
                    </el-step>
                    <el-step title="审批确认" >
                        <template #description>
                            <div class="flex align-center ww100 mt10 mb20 depBox">
                                <span lass="mr4">审批部门 : </span>
                                <MOSTY.Department v-model="listQuery.bksprSsbmdm" clearable :placeholder="listQuery.bksprSsbmmc ? listQuery.bksprSsbmmc : '' "  />
                            </div>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </el-form>
    </div>
  </div>
  <!-- 选择布控人员 -->
  <BkryDialod v-model="chooseVisible_RY" @choosed="choosed" @choosedAdd="choosedAdd" :roleIds="roleIds" />
  <!-- 选择布控群体 -->
   <BkqtDialod v-model="chooseVisible_QT" @choosed="choosed" :roleIds="roleIds"  />
</template>

<script setup>
import { getItem } from "@/utils/storage";
import BkryDialod from './bkryDialod.vue';
import BkqtDialod from './bkqtDialod.vue';
import GdMap from "@/components/GdMap/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { qcckGet,qcckPost } from "@/api/qcckApi.js";
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, nextTick } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
  dic: Object
});
const elform = ref()
const roleIds = ref([]); //角色ID
const chooseVisible_RY = ref(false); //选择布控人员弹窗
const chooseVisible_QT = ref(false); //选择布控群体弹窗
const bkqyArr = ref([]); //布控区域
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const loading = ref(false)
const addPerson = ref([]) //单独新增的数据
const listQuery = ref({
    bkYz:'01',
    bkdxList: [],
}); //表单数据
const rules = reactive({
    bkBt: [{ required: true, message: "请输入布控标题", trigger: "blur" }],
    bkDx: [{ required: true, message: "请选择布控对象", trigger: "change" }],
    bkSjKs: [{ required: true, message: "请选择布控开始时间", trigger: "change" }],
    bkSjJs: [{ required: true, message: "请选择布控结束时间", trigger: "change" }],
})
const tableDate = reactive({
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 200, //操作栏宽度
  tableColumn: [
    { label: "照片", prop: "fjZp",showSolt:true},
    { label: "姓名", prop: "ryXm" },
    { label: "性别", prop: "ryXb",showSolt:true },
    { label: "身份证号", prop: "rySfzh" },
    { label: "户籍地", prop: "ryHjd" },
    { label: "现居住地址", prop: "ryXjd" },
    { label: "手机号", prop: "rySjhm" },
    { label: "虚拟身份", prop: "qtXnsf" },
    { label: "车牌号", prop: "clCph" },
    { label: "车架号", prop: "clCjh" },
    { label: "特征描述", prop: "qtTzms" },
    { label: "人员标签", prop: "bqList" ,showSolt:true }
  ]
});
const disabled = ref(false)
// 初始化数据
const init = (type,row) => {
    if(type == 'add'){
        tableDate.tableConfiger.haveControls = true;
        disabled.value = false;
        const userInfo = getItem("userInfo");
        listQuery.value.bkfqrXm = userInfo.userName;
        listQuery.value.bkfqrSfzh = userInfo.idEntityCard;
        listQuery.value.bkfqrSsbmmc = userInfo.ssbm;
        listQuery.value.bkfqrSsbmdm = userInfo.ssbmdm;
    }
    disabled.value = type == 'add' ? false : true;
    dialogForm.value = true;
    if(row) tableDate.tableConfiger.haveControls = false;
    get_bkqy_list(row)
};

// 获取布控区域
const get_bkqy_list = (row) =>{
    qcckGet({},'/mosty-gsxt/tbGsxtBkQy/selectList').then(res=>{
        let arr = res || [];
        bkqyArr.value = arr.map(item=>{
            return {...item,label:item.qymc,value:item.id}
        })
        if(row) getDataById(row.id);
    })
}

// 根据id获取详情
const getDataById = (id) =>{
    qcckGet({},'/mosty-gsxt/tbGsxtBk/selectVoById/'+id).then(res=>{
       console.log(res,'=========00');
       listQuery.value = res || {}
    })
}

const shangeDx = () =>{
    listQuery.value.bkdxList = [];
    roleIds.value = [];
    addPerson.value = []
}
// 删除数据
const deleteRow = (row) => {
    roleIds.value = roleIds.value.filter(id => id != row.id);
    addPerson.value = addPerson.value.filter(it => it.id != row.id);
    listQuery.value.bkdxList = listQuery.value.bkdxList.filter(it => it.id != row.id);
    console.log(row,'====');
}
// 单独新增的数据
const choosedAdd = (item) =>{
    let obj = { id:item.id, fjZp:item.fjZp, ryXm:item.ryXm, ryXb:item.ryXb, rySfzh:item.rySfzh, ryHjd:item.hjdXz, ryXjd:item.xzdXz, rySjhm:item.ryLxdh, qtXnsf:item.qtXnsf,clCjh:item.clCjh, clCph:item.clCph, qtTzms:item.qtTzms, bqList:item.bqList }
    addPerson.value.push(obj) ;//缓存的数据
    if(!listQuery.value.bkdxList) listQuery.value.bkdxList = [];
    listQuery.value.bkdxList.unshift(obj);
}

// 选择重点人
const choosed = (val) => {
    if(listQuery.value.bkDx == '01'){// 人员
        roleIds.value = val.map(it=>it.id);
        let arr = val.map(item=>{
            return { id:item.id, fjZp:item.fjZp, ryXm:item.ryXm, ryXb:item.ryXb, rySfzh:item.rySfzh, ryHjd:item.hjdXz, ryXjd:item.xzdXz, rySjhm:item.ryLxdh, qtXnsf:item.qtXnsf,clCjh:item.clCjh, clCph:item.clCph, qtTzms:item.qtTzms, bqList:item.bqList }
        })
        listQuery.value.bkdxList = [...addPerson.value,...arr]; 
    }else{// 群体
        

    }
};
// 选择人员
const handleAddPeo = () =>{
    if(!listQuery.value.bkDx) return proxy.$message({ type: "warning", message: '请选择布控对象' });
    listQuery.value.bkDx == '01' ? chooseVisible_RY.value = true : chooseVisible_QT.value = true;
}

// 提交
const submit = () => {
  elform.value.validate(() => {
    let params = {  ...listQuery.value };
    params.kbfj = params.kbfj ? params.kbfj.join(','):'';
    params.bkdxList = params.bkdxList ? params.bkdxList : [];
    params.bkdxList.forEach(item=>{
        item.fjZp = item.fjZp ? item.fjZp.join(',') : ''
    })
    loading.value = true;
    qcckPost(params, "/mosty-gsxt/tbGsxtBk/save").then((res) => {
        proxy.$message({ type: "success", message: "布控成功" });
        emit("change");
        loading.value = false;
        close();
      }).catch(() => {
        loading.value = false;
      });
  });
};

// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.smallTitle{
    width: 100%;
    font-size: 15px;
    line-height: 50px;
    font-weight: 550;
    color: #606266;
}

.mapSearch{
    left: 10px;
    top: 10px;
    z-index: 100;
}

.dialog{
    ::v-deep .el-form-item--default{
        margin: 0 1% 0 0 !important;
        padding-bottom: 0 !important;
    }
}

::v-deep .avatar-uploader{
    display: flex;
}
::v-deep .el-upload--picture-card i{
    width: 156px;
}
.depBox{
    border: 1px solid #e9e9e9;
    width: 305px;
    padding: 0 0 0 4px;
    border-radius: 4px;
    ::v-deep .el-input__inner{
        border: none;
    }
    ::v-deep .el-cascader .el-input.is-focus .el-input__inner{
        border-color: transparent !important;
    }
    ::v-deep .el-input__inner:focus {
        box-shadow: none;
    }
    ::v-deep .el-input.is-disabled .el-input__inner{
        border-color: transparent !important;
    }
  
}
</style>