zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-11-28 22:25:58 +08:00
parent 85f1f3a6f7
commit e2a54c16eb
90 changed files with 2451 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/home/components/deployControlItem.vue
View File

@ -47,7 +47,8 @@
item.yjnr }}</div>
</div>
<div class="mt4 two_text_detail" v-if="buttonBox">
<el-button type="primary" @click="pushAssess(item)">全息档案</el-button>
<el-button type="primary" @click="pushAssess(item)">全息档案</el-button>
<el-button type="primary" @click="pushWarning(item)">预警指派</el-button>
<el-button color="#ef7762" @click="showDetail(item)" style="color: #fff;">转合成</el-button>
<!-- <el-button type="warning">转基管</el-button> -->
<el-button type="danger">转会商</el-button>
@ -59,13 +60,15 @@
<!-- props.item.czzt == '03'" -->
</div>
<HolographicArchive v-model="assessShow" :dataList="dataList" />
<WarningAssignment v-model="warningShow" :dataList="dataList"/>
</template>
<script setup>
import { IdCard } from '@/utils/validate.js'
import { reactive, ref, getCurrentInstance } from "vue";
import { reactive, ref, getCurrentInstance, watch } from "vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import HolographicArchive from './holographicArchive.vue'
import WarningAssignment from './warningAssignment.vue'
const { proxy } = getCurrentInstance();
const props = defineProps({
@ -80,15 +83,18 @@ const props = defineProps({
default: false
}
});
const emit = defineEmits(["plotThetrajectory", "showDetail", 'showFeedback']);
watch(() => props.item, (newVal, oldVal) => {
emit('fkLxOptions', newVal);
},{deep:true,immediate:true})
const emit = defineEmits(["plotThetrajectory", "showDetail", 'showFeedback','fkLxOptions']);
const changeBG = (str) => {
switch (str) {
case "10":
case "01":
return "red";
case "20":
case "02":
return "orange";
case "30":
case "03":
return "#b5b522";
default:
return "blue";
@ -103,6 +109,16 @@ const showFeedback = (val, type) => {
switch (type) {
case '签收':
proxy.$confirm("是否确定要签收？", "警告", { type: "warning" }).then(() => {
// switch (val.czzt) {
// case '01':
// val.czzt = '02'
// break;
// case '02':
// val.czzt = '03'
// break;
// default:
// break;
// }
qcckPost({ id: val.id }, "/mosty-gsxt/tbYjxx/yjqs").then(() => {
val.czzt = '02'
proxy.$message({ type: "success", message: "签收成功" });
@ -122,12 +138,19 @@ const showFeedback = (val, type) => {
const showDetail = (item) => {
emit('showDetail', item);
}
// 全息档案
const assessShow = ref(false)
const dataList = ref()
const pushAssess = (val) => {
assessShow.value = true;
dataList.value = val;
}
// 预警指派
const warningShow = ref(false)
const pushWarning = (val) => {
warningShow.value = true;
dataList.value = val;
}
</script>
<style lang="scss" scoped>

705
src/views/home/components/holographicArchive.vue
View File

@ -1,157 +1,158 @@
<!--全息档案展示组件 -->
<template>
<el-dialog :draggable="true" v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
<el-dialog v-model="modelValue" :title="title" :width="width" @close="close" top="5vh" append-to-body>
<div class="archive-container">
<!-- 基本信息卡片 -->
<div class="basic-info-card">
<div class="info-header">
<!-- 头像区域 -->
<div class="avatar-section">
<el-image class="main-avatar" :src="personData.rltp || personData.qsztp" fit="cover"
:preview-src-list="[personData.rltp , personData.qsztp]" />
</div>
<!-- 基本信息 -->
<div class="basic-info">
<!-- 姓名字段单独一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">姓名：</span>
<span class="info-value">{{ personData.xm || '未记录' }}</span>
<div style="display: flex;justify-content: space-between;">
<div class="basic-info-card">
<div class="info-header">
<!-- 头像区域 -->
<div class="avatar-section">
<el-image class="main-avatar" :src="personData.rltp || personData.qsztp" fit="cover"
:preview-src-list="[personData.rltp, personData.qsztp]" />
</div>
<!-- 基本信息 -->
<div class="basic-info">
<!-- 姓名字段单独一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">姓名：</span>
<span class="info-value">{{ personData.xm || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">身份号：</span>
<span class="info-value">{{ personData.sfzhm || '未记录' }}</span>
</div>
</div>
<div class="info-item">
<span class="info-label">身份号：</span>
<span class="info-value">{{ personData.sfzhm || '未记录' }}</span>
<!-- 基本信息 - 两个字段一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">出生日期：</span>
<span class="info-value">{{ personData.csrq || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">性别：</span>
<span class="info-value">{{ personData.xb || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">民族：</span>
<span class="info-value">{{ personData.mz || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">婚姻状况：</span>
<span class="info-value">{{ personData.hyzq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">联系方式：</span>
<span class="info-value">{{ personData.lxfs || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">户主号码：</span>
<span class="info-value">{{ personData.hzhm || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">文化程度：</span>
<span class="info-value">{{ personData.whcd || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">毕业情况：</span>
<span class="info-value">{{ personData.byqq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">身高：</span>
<span class="info-value">{{ personData.sg || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">人员标签：</span>
<span class="info-value">{{ personData.rybq || '未记录' }}</span>
</div>
</div>
</div>
</div>
<!-- 基本信息 - 两个字段一行 -->
<!-- 详细信息 -->
<div class="detail-info">
<!-- 详细信息 - 两个字段一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">出生日期：</span>
<span class="info-value">{{ personData.csrq || '未记录' }}</span>
<span class="info-label">人员国籍：</span>
<span class="info-value">{{ personData.rygj || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">性别：</span>
<span class="info-value">{{ personData.xb || '未记录' }}</span>
<span class="info-label">人员地区：</span>
<span class="info-value">{{ personData.rydq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">户籍城市：</span>
<span class="info-value">{{ personData.hjcs || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">户籍籍贯：</span>
<span class="info-value">{{ personData.hjjg || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">工作单位：</span>
<span class="info-value">{{ personData.gzdw || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">职业信息：</span>
<span class="info-value">{{ personData.zyxx || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">民族：</span>
<span class="info-value">{{ personData.mz || '未记录' }}</span>
<span class="info-label">入境时间：</span>
<span class="info-value">{{ personData.rjsj || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">婚姻状况：</span>
<span class="info-value">{{ personData.hyzq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">联系方式：</span>
<span class="info-value">{{ personData.lxfs || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">户主号码：</span>
<span class="info-value">{{ personData.hzhm || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">文化程度：</span>
<span class="info-value">{{ personData.whcd || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">毕业情况：</span>
<span class="info-value">{{ personData.byqq || '未记录' }}</span>
<span class="info-label">入境事由：</span>
<span class="info-value">{{ personData.rjsy || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">身高：</span>
<span class="info-value">{{ personData.sg || '未记录' }}</span>
<span class="info-label">证件类型：</span>
<span class="info-value">{{ personData.qzlx || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">证件号码：</span>
<span class="info-value">{{ personData.qzhm || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">人员标签：</span>
<span class="info-value">{{ personData.rybq || '未记录' }}</span>
<div class="info-item">
<span class="info-label">证件校验：</span>
<span class="info-value">{{ personData.zjxy || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">境外人员类别：</span>
<span class="info-value">{{ personData.jwrylb || '未记录' }}</span>
</div>
</div>
</div>
</div>
<!-- 详细信息 -->
<div class="detail-info">
<!-- 详细信息 - 两个字段一行 -->
<div class="info-row">
<div class="info-item">
<span class="info-label">人员国籍：</span>
<span class="info-value">{{ personData.rygj || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">人员地区：</span>
<span class="info-value">{{ personData.rydq || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">户籍城市：</span>
<span class="info-value">{{ personData.hjcs || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">户籍籍贯：</span>
<span class="info-value">{{ personData.hjjg || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">工作单位：</span>
<span class="info-value">{{ personData.gzdw || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">职业信息：</span>
<span class="info-value">{{ personData.zyxx || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">入境时间：</span>
<span class="info-value">{{ personData.rjsj || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">入境事由：</span>
<span class="info-value">{{ personData.rjsy || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">证件类型：</span>
<span class="info-value">{{ personData.qzlx || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">证件号码：</span>
<span class="info-value">{{ personData.qzhm || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item">
<span class="info-label">证件校验：</span>
<span class="info-value">{{ personData.zjxy || '未记录' }}</span>
</div>
<div class="info-item">
<span class="info-label">境外人员类别：</span>
<span class="info-value">{{ personData.jwrylb || '未记录' }}</span>
</div>
</div>
<!-- <div class="info-row">
<!-- <div class="info-row">
<div class="info-item">
<span class="info-label">毕业情况：</span>
<span class="info-value">{{ personData.byqq || '未记录' }}</span>
@ -162,14 +163,14 @@
</div>
</div> -->
<!-- <div class="info-row">
<!-- <div class="info-row">
<div class="info-item">
<span class="info-label">户主号码：</span>
<span class="info-value">{{ personData.hzhm || '未记录' }}</span>
</div>
</div> -->
<!-- <div class="info-row">
<!-- <div class="info-row">
<div class="info-item">
<span class="info-label">起始图片：</span>
@ -177,18 +178,44 @@
</div>
</div> -->
<!-- 户籍和居住地放在最后，独占一行 -->
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">户籍所在地：</span>
<span class="info-value">{{ personData.hjdz || '未记录' }}</span>
<!-- 户籍和居住地放在最后，独占一行 -->
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">户籍所在地：</span>
<span class="info-value">{{ personData.hjdz || '未记录' }}</span>
</div>
</div>
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">居住地：</span>
<span class="info-value">{{ personData.jzdz || '未记录' }}</span>
</div>
</div>
</div>
<div class="info-row">
<div class="info-item full-width">
<span class="info-label">居住地：</span>
<span class="info-value">{{ personData.jzdz || '未记录' }}</span>
</div>
<!-- 右侧表单区域 -->
<div class="form-card" style="width: 50%;margin-left: 20px;">
<div class="form-header">
<div>
<span class="form-title">信息编辑</span>
<span class="form-title" @click="dialogShow = true"><el-icon>
<Plus />
</el-icon></span>
</div>
</div>
<div v-if="fromData.length > 0" class="info-items-container">
<div class="info-item-wrapper" v-for="(item, index) in fromData" :key="index">
<div class="info-item-title">{{ item.bt }}</div>
<div class="info-item-content">
<el-input v-model="item.nr" placeholder="请输入内容" clearable />
<el-icon class="undete-icon" @click="updateItem(item)">
<EditPen />
</el-icon>
<el-icon class="delete-icon" @click="deleteItem(item.id)">
<Delete />
</el-icon>
</div>
</div>
</div>
</div>
@ -199,11 +226,32 @@
<el-button @click="close">关闭</el-button>
</div>
</template>
<el-dialog v-model="dialogShow" title="信息编辑" width="30%" @close="dialogShow = false">
<el-form ref="formRef" :model="listQuery" :rules="rules" label-width="100px">
<el-form-item label="标题" prop="bt">
<el-input v-model="listQuery.bt" placeholder="请输入标题" clearable />
</el-form-item>
<el-form-item label="内容" prop="nr">
<el-input v-model="listQuery.nr" placeholder="请输入内容" clearable />
</el-form-item>
<el-form-item>
<div class="dialog-footer">
<el-button type="primary" @click="closeAdd(formRef)">取消 </el-button>
<el-button @click="submit(formRef)">确定</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
</el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, reactive, watch } from 'vue';
import {ryxxJbxxSave} from '@/api/qxda.js'
import { ref, defineProps, defineEmits, reactive, watch, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { ryxxJbxxSave, yjxxDawsAddEntity, yjxxDawsGetPageList, yjxxDawsDeleteEntity, yjxxDawsUpdateEntity } from '@/api/qxda.js'
const { proxy } = getCurrentInstance()
const props = defineProps({
modelValue: {
type: Boolean,
@ -215,7 +263,7 @@ const props = defineProps({
},
width: {
type: String,
default: '50%'
default: '80%'
},
url: {
type: String,
@ -226,38 +274,121 @@ const props = defineProps({
default: () => ({})
}
});
const formRef = ref()
watch(() => props.modelValue, (newVal, oldVal) => {
if (newVal) {
getryxxJbxxSave()
getyjxxDawsGetPageList()
}
})
// 个人信息数据对象 - 使用用户提供的数据
const personData = ref({ });
const personData = ref({});
const rules = reactive({
bt: [{ required: true, message: '请输入标题', trigger: 'blur' }],
nr: [{ required: true, message: '请输入内容', trigger: 'blur' }],
})
// 定义事件
const emit = defineEmits(['update:modelValue']);
const getryxxJbxxSave = () => {
const params = { sfzhm: props.dataList.rysfzh || props.dataList.yjRysfzh||props.dataList.sfzh };
ryxxJbxxSave(params).then((res) => {
personData.value = res[0]
ryxxJbxxSave({
sfzhm: props.dataList.rysfzh // props.dataList.rysfzh
}).then((res) => {
personData.value = res[0]
});
}
const listQuery = ref({})
const dialogShow = ref(false)
// 提交字段
const submit = (formEl) => {
if (!formEl) return
formEl.validate((valid, fields) => {
if (valid) {
const promes = {
yjid: props.dataList.id,
...listQuery.value
}
if (promes.id) {
yjxxDawsUpdateEntity(promes).then((res) => {
ElMessage({
message: '更新成功',
type: 'success'
})
dialogShow.value = false
getyjxxDawsGetPageList()
formRef.value.resetFields()
})
} else {
yjxxDawsAddEntity(promes).then((res) => {
ElMessage({
message: '添加成功',
type: 'success'
})
dialogShow.value = false
getyjxxDawsGetPageList()
formRef.value.resetFields()
})
}
} else {
console.log('error submit!', fields)
}
})
}
const fromData = ref()
const getyjxxDawsGetPageList = () => {
yjxxDawsGetPageList({ yjid: props.dataList.id }).then((res) => {
fromData.value = res ? res : []
})
}
// 删除
const deleteItem = (id) => {
proxy.$confirm('确认删除吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
yjxxDawsDeleteEntity({ ids: [id] }).then((res) => {
ElMessage({
message: '删除成功',
type: 'success'
})
getyjxxDawsGetPageList()
})
})
}
const closeAdd = (formEl) => {
console.log(formEl);
formEl.resetFields()
dialogShow.value = false
}
// 修改
const updateItem = (item) => {
listQuery.value = { ...item }
dialogShow.value = true
}
// 关闭对话框
const close = () => {
emit('update:modelValue', false);
};
</script>
<style scoped>
/* 容器样式 */
.archive-container {
padding: 15px;
height: 50vh;
height: 70vh;
overflow: auto;
}
/* 基本信息卡片 */
.basic-info-card {
flex: 1;
background-color: #f0f9ff;
border: 1px solid #91d5ff;
border-radius: 8px;
@ -375,6 +506,286 @@ const close = () => {
gap: 12px;
}
/* 表单卡片样式 */
.form-card {
background-color: #f0f9ff;
border: 1px solid #91d5ff;
border-radius: 8px;
padding: 25px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
}
/* 表单头部 */
.form-header {
border-bottom: 1px solid #d6eaff;
padding-bottom: 15px;
margin-bottom: 25px;
}
/* 表单标题容器 */
.form-header div {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
}
/* 表单标题 */
.form-title {
color: #0060c8;
font-size: 18px;
font-weight: bold;
text-shadow: 0 1px 3px rgba(0, 96, 200, 0.3);
letter-spacing: 0.5px;
}
/* 表单标题图标 */
.form-title .el-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #409EFF, #0060c8);
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 96, 200, 0.3);
}
/* 表单标题图标悬停效果 */
.form-title .el-icon:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 96, 200, 0.4);
background: linear-gradient(135deg, #66b1ff, #409EFF);
}
/* 档案表单 */
.archive-form {
flex: 1;
display: flex;
flex-direction: column;
gap: 18px;
}
/* 表单元素样式 */
:deep(.el-form-item) {
margin-bottom: 20px;
padding: 12px;
background-color: #fff;
border-radius: 8px;
border: 1px solid #e6f7ff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
}
:deep(.el-form-item:hover) {
border-color: #91d5ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
:deep(.el-form-item__label) {
color: #0060c8;
font-weight: bold;
font-size: 14px;
min-width: 80px;
}
/* 表单输入框容器 */
.el-form-item div {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
/* 输入框样式 */
:deep(.el-input) {
flex: 1;
}
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
border-radius: 4px;
border: 1px solid #91d5ff;
background-color: #fff;
box-shadow: none;
transition: all 0.3s ease;
}
/* 编辑和删除图标样式 */
.el-form-item .el-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
/* 编辑图标样式 */
.el-form-item .el-icon:first-of-type {
color: #67c23a;
background-color: #f0f9eb;
border: 1px solid #e1f3d8;
}
.el-form-item .el-icon:first-of-type:hover {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}
/* 删除图标样式 */
.el-form-item .el-icon:last-of-type {
color: #f56c6c;
background-color: #fef0f0;
border: 1px solid #fbc4c4;
}
.el-form-item .el-icon:last-of-type:hover {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}
:deep(.el-input__wrapper:focus-within),
:deep(.el-select__wrapper:focus-within) {
border-color: #409EFF;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
:deep(.el-button--primary) {
background-color: #409EFF;
border-color: #409EFF;
border-radius: 4px;
padding: 8px 20px;
font-size: 14px;
}
:deep(.el-button--primary:hover) {
background-color: #66b1ff;
border-color: #66b1ff;
}
:deep(.el-button) {
border-radius: 4px;
padding: 8px 20px;
font-size: 14px;
}
/* 信息项容器 */
.info-items-container {
display: flex;
flex-direction: column;
gap: 16px;
/* align-items: center; */
}
/* 单个信息项包装器 */
.info-item-wrapper {
background-color: #fff;
border-radius: 8px;
border: 1px solid #e6f7ff;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
display: flex;
align-items: center;
}
/* 信息项悬停效果 */
.info-item-wrapper:hover {
border-color: #91d5ff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* 信息项标题 */
.info-item-title {
color: #0060c8;
font-weight: bold;
font-size: 14px;
/* margin-bottom: 12px;
padding-bottom: 8px; */
min-width: 80px;
max-width: 200px;
}
/* 信息项内容容器 */
.info-item-content {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
/* 信息项输入框样式 */
.info-item-content :deep(.el-input) {
flex: 1;
}
/* 删除图标样式 */
.info-item-content .delete-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
color: #f56c6c;
background-color: #fef0f0;
border: 1px solid #fbc4c4;
}
/* 删除图标悬停效果 */
.info-item-content .delete-icon:hover {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}
.info-item-content .undete-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
color: #6cf56e;
background-color: #f2fef0;
border: 1px solid #e1f3d8;
}
/* 删除图标悬停效果 */
.info-item-content .undete-icon:hover {
color: #fff;
background-color: #6cf56e;
border-color: #6cf56e;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(108, 245, 110, 0.3);
}
/* 响应式设计 */
@media (max-width: 768px) {
.info-header {

85
src/views/home/components/warningAssignment.vue Normal file
View File

@ -0,0 +1,85 @@
<!--预警指派展示组件 -->
<template>
<el-dialog :draggable="true" v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
<div class="archive-container">
<FormMessage :formList="formData" v-model="listQuery" ref="elform" :rules="rules" :labelWidth="90">
</FormMessage>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submit">确定</el-button>
<el-button @click="close">关闭</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ref, defineProps, defineEmits, reactive, watch, getCurrentInstance } from 'vue';
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { tbYjxxYjzp } from '@/api/yj'
const { proxy } = getCurrentInstance();
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
title: {
type: String,
default: '预警指派'
},
width: {
type: String,
default: '50%'
},
url: {
type: String,
default: ''
},
dataList: {
type: Object,
default: () => ({})
}
});
const listQuery = ref()
const formData = ref([
{ label: "指派部门", prop: "zpbmdm", depMc: 'zpbm', type: "department", width: '45%' },
{ label: "指派原因", prop: "zpyy", type: "textarea", width: '80%' },
])
const rules = reactive({
zpbmdm: [{ required: true, message: "请选择指派部门", trigger: "blur" }],
zpyy: [{ required: true, message: "请输入指派原因", trigger: "change" }],
});
watch(() => props.modelValue, (newVal, oldVal) => {
if (newVal) {
}
})
const elform = ref(null)
const submit = async () => {
elform.value.submit(() => {
const params = { ...listQuery.value, yjid: props.dataList.id };
tbYjxxYjzp(params).then((res) => {
proxy.$message({ type: "success", message: "成功" });
close();
}).catch(() => {
proxy.$message({ type: "error", message: "失败" });
});
});
}
// 定义事件
const emit = defineEmits(['update:modelValue']);
const close = () => {
elform.value.reset()
emit('update:modelValue', false);
};
</script>
<style scoped>
/* 容器样式 */
.archive-container {
padding: 15px;
height: 50vh;
overflow: auto;
}
</style>