sgxt_web/src/views/backOfficeSystem/HumanIntelligence/components/fszl.vue

<!--文件导出  -->
<template>
  <el-dialog v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
    <div style="height: 50vh; overflow: auto;">
      <FormMessage v-model="listQuery" :formList="formData" labelWidth="100px" ref="elform" :rules="rules">
        <template #zrSsbmdm>
          <MOSTY.Department filterable v-model="listQuery.zrSsbmdm" width="100%" @getDepValue="getDepValue" clearable
            placeholder="请选择所属部门" :multiple="true" />
        </template>
        <template #ry>
          <el-input readonly v-model="listQuery.ry" @click="chooseUserVisible = true" placeholder="请选择民警"></el-input>
        </template>
      </FormMessage>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="getsendFqzl">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <ChooseUser v-model="chooseUserVisible" @choosedUsers="handleUserSelected" :roleIds="roleIds" :Single="false" />

</template>
<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { qbcjZhcSendFqzl } from '@/api/qbcj'
import { qcckPost } from "@/api/qcckApi.js";
import { getItem } from '@/utils/storage'
import * as MOSTY from "@/components/MyComponents/index";
import ChooseUser from "@/components/ChooseList/ChooseUser/index.vue"
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  itemData: {
    type: Object,
    default: () => { }
  },  tacitly: {
    type: Object,
    default: () => { }
  },
  modelValue: {
    type: Boolean,
    default: false
  }, title: {
    type: String,
    default: "发送指令"
  }, width: {
    type: String,
    default: "50%"
  },
  path: {
    type: String,
    default: "/qbcjZhc/sendFqzl"
  }



})
const emit = defineEmits(['handleClose', 'update:modelValue'])

// 表单数据
const listQuery = ref({}); //表单
// 选择人员
const ryStr = ref('')
const elform = ref()
const personnelEntity = ref()
const formData = ref([
  { label: "标题", prop: "title", type: "input", width: "40%" },
  { label: "接收单位", prop: "zrSsbmdm", type: "slot", width: "40%" },
  { label: "指令状态", prop: "status", type: "input", width: "40%" },
  { label: "人员选择", prop: "ry", type: "slot", width: "40%" },
  { label: "附件", prop: "attachmentPath", type: "upload" },
  { label: "指令内容", prop: "instructionContent", type: "textarea", width: "100%" },

])
const rules = reactive({
  title: [{ required: true, message: "请输入指令标题", trigger: "blur" }],
  zrSsbmdm: [{ required: true, message: "请选择接收单位", trigger: "blur" }],
  instructionContent: [{ required: true, message: "请输入指令内容", trigger: "blur" }],
  ry: [{ required: true, message: "请选择人员", trigger: "blur" }]
});
const deptId = getItem('deptId')
const getsendFqzl = () => {
  elform.value.submit(async (val) => {
    if (val) {
      const data = { ...listQuery.value }
      delete data.ry
      const promes = {
        instructionsEntity: {
          unitCode: deptId[0].deptCode,
          unitName: deptId[0].deptName,
          ...data,
          receivingUnitCode: listQuery.value.zrSsbmdm.toString(),
          receivingUnit: listQuery.value.receivingUnit.toString(),
          attachmentPath: JSON.stringify(listQuery.value.attachmentPath)
        }, id: props.itemData.id,
        personnelEntity: personnelEntity.value
      }
      try {
        const res = await qcckPost(promes,props.path )
        // qbcjZhcSendFqzl(promes)
        const str = JSON.parse(res)
        if (str.code == 200) {
          ElMessage.success('发送成功')
          listQuery.value = {}
          listQuery.value.attachmentPath = ''
          emit('handleClose')
        } else {
          ElMessage.error(str.msg)
        }
      } catch (error) {
        console.log(error);

      }

    }
  })


}

watch(() => props.itemData, (val) => {
  // listQuery.value.title = val[props.tacitly['title']]
  // if (props.tacitly['instructionContent']) {
  //   listQuery.value.instructionContent = val[props.tacitly['instructionContent']]
  // }
}, { deep: true, immediate: true })
const chooseUserVisible = ref(false)
const roleIds = ref([])
// 选取角色
const handleUserSelected = (val) => {
  personnelEntity.value = val.map((item, index) => {
    return {
      name: item.userName,
      idNumber: item.idEntityCard,
      phoneNumber: item.mobile,
      personTypeId: "",
      personTypeName: "",
      domicilePlace: "",
      orderId: index + 1
    }
  })
  // ryStr.value
  listQuery.value.ry = personnelEntity.value.map(item => item.name)
}
// 选取部门
const getDepValue = (e) => {
  listQuery.value.receivingUnit = e.map(item => item.orgName)
}
const close = () => {
  listQuery.value = {}
  listQuery.value.attachmentPath = ''
  emit('update:modelValue', false)
}
</script>

<style scoped>
.intelligence-container {
  padding: 10px;
}

.info-row {
  display: flex;
  margin-bottom: 20px;
  gap: 30px;
  flex-wrap: wrap;
}

.info-item {
  flex: 1;
  min-width: 250px;
}

.info-label {
  font-size: 14px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 8px;
}

.info-value {
  font-size: 14px;
  color: #606266;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  min-height: 32px;
  line-height: 1.5;
}

.content-section {
  margin-top: 10px;
}

.info-content {
  font-size: 14px;
  color: #606266;
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  min-height: 100px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  border-left: 3px solid #409EFF;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .info-row {
    flex-direction: column;
    gap: 15px;
  }

  .info-item {
    min-width: 100%;
  }
}
</style>