lcw
This commit is contained in:
@ -0,0 +1,150 @@
|
||||
<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" ref="elform" :rules="rules" />
|
||||
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submit">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { onMounted, reactive, watch, ref, computed, getCurrentInstance } from 'vue'
|
||||
import { ElMessage, ElEmpty } from 'element-plus'
|
||||
import { xxcjPzgzbm, xxcjSelectByid } from "@/api/xxcj.js";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '50%'
|
||||
}, tableColumn: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}, dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '配置部门'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue', 'getList'])
|
||||
// 过滤后的数据
|
||||
const listQuery = ref({})
|
||||
const rules = ref({
|
||||
fxfzrq: [
|
||||
{ required: true, message: '请选择关注部门', trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
const formData = ref([
|
||||
{ label: "关注部门", prop: "ssbmdm", depMc: 'ssbm', type: "department", width: '45%', multiple: true },
|
||||
])
|
||||
const elform = ref(null)
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal) {
|
||||
listQuery.value.ssbmdm = props.dataList.gzbmList.map(item => item.ssbmdm)
|
||||
}
|
||||
})
|
||||
// 搜索相关
|
||||
const close = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
const submit = () => {
|
||||
elform.value.submit(async (val) => {
|
||||
try {
|
||||
const list = listQuery.value.ssbmdm.map((item, index) => {
|
||||
return {
|
||||
ssbmdm: item,
|
||||
ssbm: listQuery.value.ssbm[index],
|
||||
qbid: props.dataList.id
|
||||
}
|
||||
})
|
||||
const promes = { list }
|
||||
await xxcjPzgzbm(promes)
|
||||
proxy.$message({ type: "success", message: "配置成功" });
|
||||
close()
|
||||
emit('getList')
|
||||
} catch (error) {
|
||||
proxy.$message({ type: "error", message: error.message });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 搜索区域样式 */
|
||||
.search-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* 内容展示区域样式 */
|
||||
.content-container {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 数据列表样式 */
|
||||
.data-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
padding: 12px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.data-item:hover {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<el-dialog v-model="modelValue" :title="title" :width="width" @close="close" append-to-body>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-input v-model="searchQuery" placeholder="请输入搜索内容" clearable class="search-input" />
|
||||
</div>
|
||||
|
||||
<!-- 内容展示区域 -->
|
||||
<div class="content-container">
|
||||
<div class="content-area">
|
||||
<!-- 预留内容展示空间 -->
|
||||
<div v-if="filteredData.length > 0" class="data-list">
|
||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
|
||||
全选
|
||||
</el-checkbox>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="(item, index) in filteredData" :key="index" :label="item.dm">
|
||||
{{ item.zdmc }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div v-else class="empty-state">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submit">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { onMounted, reactive, watch, ref, computed } from 'vue'
|
||||
import { ElMessage, ElEmpty } from 'element-plus'
|
||||
import { xxcjDbqList, xxcjSelectByid } from "@/api/xxcj.js";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '50%'
|
||||
}, tableColumn: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}, dict: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '自定义标签'
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'getList'])
|
||||
|
||||
|
||||
|
||||
// 过滤后的数据
|
||||
const filteredData = computed(() => {
|
||||
if (!props.dict.D_XXCJ_BQLX) return []
|
||||
if (!searchQuery.value) return props.dict.D_XXCJ_BQLX
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return props.dict.D_XXCJ_BQLX.filter(item => {
|
||||
return item.zdmc && item.zdmc.toLowerCase().includes(query)
|
||||
})
|
||||
})
|
||||
// 搜索相关
|
||||
const searchQuery = ref('')
|
||||
|
||||
const close = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
const submit = () => {
|
||||
|
||||
const a = checkedCities.value.map(v => {
|
||||
return props.dict.D_XXCJ_BQLX.find(item => item.dm == v)
|
||||
})
|
||||
const promes = a.map(item => {
|
||||
return {
|
||||
qbid: props.dataList.id,
|
||||
bqdm: item.dm,
|
||||
bqmc: item.zdmc,
|
||||
}
|
||||
})
|
||||
xxcjDbqList({ list: promes }).then(res => {
|
||||
ElMessage({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
})
|
||||
emit('getList')
|
||||
close()
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 选择标签
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(false)
|
||||
const checkedCities = ref([])
|
||||
const handleCheckAllChange = (val) => {
|
||||
checkedCities.value = val ? filteredData.value.map(item => item.dm) : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedCitiesChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === filteredData.value.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < filteredData.value.length
|
||||
}
|
||||
// 当对话框显示时处理表格列配置
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
if (newVal) {
|
||||
xxcjSelectByid({ id: props.dataList.id }).then(res => {
|
||||
checkedCities.value = res.glbqList.map(v => v.bqdm)
|
||||
checkAll.value = res.glbqList.length == props.dict.D_XXCJ_BQLX.length
|
||||
isIndeterminate.value = res.glbqList.length < props.dict.D_XXCJ_BQLX.length
|
||||
|
||||
})
|
||||
}
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 搜索区域样式 */
|
||||
.search-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* 内容展示区域样式 */
|
||||
.content-container {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 数据列表样式 */
|
||||
.data-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
padding: 12px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.data-item:hover {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -153,12 +153,8 @@ const getDepValue = (e) => {
|
||||
const close = () => {
|
||||
listQuery.value = {}
|
||||
listQuery.value.attachmentPath = ''
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getsendFqzl,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -13,20 +13,6 @@
|
||||
<div class="info-value">{{ item.sxsbsj }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<div class="info-label">情报类型:</div>
|
||||
<div class="info-value">
|
||||
<DictTag :tag="false" :value="item.qblx" :options="dict.D_GS_XS_LX" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">情报来源:</div>
|
||||
<div class="info-value">
|
||||
<DictTag :tag="false" :value="item.cjLx" :options="dict.D_BZ_CJLX" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="info-label">情报内容:</div>
|
||||
<div class="info-content">{{ item.qbnr }}</div>
|
||||
|
||||
@ -22,6 +22,9 @@ import { onMounted, reactive, watch, ref } from 'vue'
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { qbcjCzzt, qbcjCzztEdit } from "@/api/qbcj.js"
|
||||
|
||||
|
||||
import { xxcjAddBc,xxcjUpdateBc } from "@/api/xxcj.js"
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
@ -91,18 +94,20 @@ const formData = ref([
|
||||
])
|
||||
const submit = () => {
|
||||
elform.value.submit((val) => {
|
||||
const promes = {
|
||||
xsid: props.dataList.id,
|
||||
let promes = {
|
||||
qbid: props.dataList.id,
|
||||
...listQuery.value
|
||||
}
|
||||
if (props.updeteBool) {
|
||||
qbcjCzztEdit(promes).then(res => {
|
||||
promes.czlx=props.title=='信息追加'?'02':'01'
|
||||
xxcjUpdateBc(promes).then(res => {
|
||||
ElMessage.success('修改成功')
|
||||
close()
|
||||
emit('getqbcjCzztList')
|
||||
})
|
||||
} else {
|
||||
qbcjCzzt(promes).then(res => {
|
||||
promes.czlx=props.title=='信息追加'?'02':'01'
|
||||
xxcjAddBc(promes).then(res => {
|
||||
ElMessage.success('新增成功')
|
||||
close()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user