lcw
This commit is contained in:
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
|
||||
<div class="backinfo-container">
|
||||
<div class="headClass" style="">
|
||||
<h3>群体信息</h3>
|
||||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
|
||||
</div>
|
||||
<el-input v-model="qtbjxx" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入背景信息"
|
||||
class="background-info-input" :disabled="disabled"/>
|
||||
|
||||
<!-- 文件列表区域 -->
|
||||
<div class="file-attachment-section">
|
||||
<div class="section-title">相关附件</div>
|
||||
<div class="file-list-container">
|
||||
<div v-if="fileList.length === 0" class="empty-file-list">暂无附件</div>
|
||||
<div v-else class="file-list">
|
||||
<div v-for="(file, index) in fileList" :key="index" class="file-item">
|
||||
<div class="file-info">
|
||||
<span class="file-name">{{ file.originalName }}</span>
|
||||
<span class="file-time">{{ file.uploadTime }}</span>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<el-button type="text" size="small" @click="downloadFile(file)" title="下载文件" :disabled="disabled">
|
||||
<el-icon>
|
||||
<Download />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="deleteFile(index)" title="删除文件" class="delete-btn" :disabled="disabled">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 上传按钮区域 -->
|
||||
<div class="upload-btn-container">
|
||||
<el-upload v-model:file-list="fileList" class="upload-demo" :show-file-list="false" multiple
|
||||
:http-request="handleUploadRequest" :on-remove="handleRemove" :limit="3" :on-exceed="handleExceed">
|
||||
<el-button type="primary" :disabled="disabled">上传文件</el-button >
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref ,watch} from "vue";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Delete, Download } from '@element-plus/icons';
|
||||
import { uploadMultipleFiles } from './fileUp'
|
||||
import {tbGsxtZdqtUpdate} from '@/api/qt.js'
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const qtbjxx = ref('')
|
||||
// 文件列表数据
|
||||
const fileList = ref([])
|
||||
watch(()=>props.dataList,(val)=>{
|
||||
if (val) {
|
||||
qtbjxx.value=val.qtBjzl
|
||||
fileList.value=val.qtFjZl?JSON.parse(val.qtFjZl):[]
|
||||
}
|
||||
},{deep:true})
|
||||
|
||||
// 下载文件
|
||||
const downloadFile = (file) => {
|
||||
// 实际项目中，这里应该调用下载API
|
||||
console.log('下载文件:', file.name)
|
||||
// 示例：window.open(file.url)
|
||||
}
|
||||
// 删除文件
|
||||
const deleteFile = (index) => {
|
||||
// 实际项目中，这里应该先调用删除API，成功后再从列表中移除
|
||||
fileList.value.splice(index, 1)
|
||||
ElMessage.success('文件已删除')
|
||||
}
|
||||
|
||||
// 上传相关方法
|
||||
const handleUploadRequest = async (options) => {
|
||||
try {
|
||||
// 调用uploadMultipleFiles进行文件上传
|
||||
const result = await uploadMultipleFiles(options.file, {
|
||||
uploadedFiles: fileList.value,
|
||||
fjIds: [], // 如果需要保存文件ID列表，可以在这里传递
|
||||
compressImage: null // 可选的图片压缩函数
|
||||
});
|
||||
// 更新文件列表，添加上传时间信息
|
||||
const index = fileList.value.findIndex(f => f.originalName === options.file.name);
|
||||
if (index !== -1) {
|
||||
fileList.value[index].uploadTime = new Date().toLocaleString('zh-CN');
|
||||
}
|
||||
// 调用成功回调
|
||||
if (options.onSuccess) {
|
||||
options.onSuccess(result);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('文件上传失败:', error);
|
||||
// 调用失败回调
|
||||
if (options.onError) {
|
||||
options.onError(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemove = (uploadFile, uploadFiles) => {
|
||||
// 实际项目中，这里应该先调用删除API，成功后再从列表中移除
|
||||
const index = fileList.value.findIndex(f => f.name === uploadFile.name);
|
||||
if (index !== -1) {
|
||||
fileList.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const handleExceed = (files, uploadFiles) => {
|
||||
ElMessage.warning(`最多只能上传 3 个文件`);
|
||||
}
|
||||
// 修改数据
|
||||
const ClickSave = () => {
|
||||
const promes = {
|
||||
id: props.dataList.id,
|
||||
qtBjzl: qtbjxx.value,
|
||||
qtFjZl:fileList.value.length>0?JSON.stringify(fileList.value):null
|
||||
}
|
||||
tbGsxtZdqtUpdate(promes).then((res) => {
|
||||
ElMessage.success('修改成功')
|
||||
}).catch((err) => {
|
||||
ElMessage.error('修改失败')
|
||||
});
|
||||
}
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// 基本验证：确保背景信息不为空
|
||||
if (!qtbjxx.value.trim()) {
|
||||
throw new Error('请输入群体背景信息');
|
||||
}
|
||||
|
||||
resolve({
|
||||
qtbjxx: qtbjxx.value,
|
||||
fileList: fileList.value
|
||||
});
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.background-info-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-attachment-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.file-list-container {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.file-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #909399;
|
||||
}
|
||||
|
||||
.empty-file-list {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #e6f7ff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-actions .el-button {
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-actions .el-button:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: #f56c6c !important;
|
||||
}
|
||||
|
||||
.upload-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>群体性质</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="showDialog = true">选择</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<ShowXz v-model="showDialog" @choosed="addMarks" :roleIds="roleIds" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import ShowXz from '../component/showXz'
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { tbZdqtQtxzBatchAdd, tbZdqtQtxzBatchDelete, tbZdqtQtxzSelectPage } from '@/api/qt.js'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'zdmc',
|
||||
label: '性质名称',
|
||||
}, {
|
||||
prop: 'dm',
|
||||
label: '性质代码',
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
const listData = ref([])
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
getTbZdqtQtxzSelectPage({ qtid: val.id, pageCurrent: 1, pageSize: 1000 })
|
||||
}
|
||||
}, { deep: true })
|
||||
const showDialog = ref(false)
|
||||
const roleIds = ref([])
|
||||
//新增接口
|
||||
const gettbZdqtQtxzBatchAdd = (val) => {
|
||||
tbZdqtQtxzBatchAdd(val).then(res => {
|
||||
let str = ''
|
||||
if (!props.disabled && props.showBut) {
|
||||
str = '修改成功'
|
||||
} else {
|
||||
str = '添加成功'
|
||||
}
|
||||
proxy.$message({
|
||||
message: str,
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除接口
|
||||
const deleteTbZdqtQtxzBatchDelete = (val) => {
|
||||
tbZdqtQtxzBatchDelete(val).then(res => {
|
||||
proxy.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}
|
||||
// 查询接口
|
||||
const getTbZdqtQtxzSelectPage = (val) => {
|
||||
tbZdqtQtxzSelectPage(val).then(res => {
|
||||
roleIds.value = res.records.map(item => item.xzdm)
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
zdmc: item.xzmc,
|
||||
dm: item.xzdm,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 添加性质标签
|
||||
const addMarks = (val) => {
|
||||
pageData.tableData = val.map(v => {
|
||||
return { zdmc: v.zdmc, dm: v.dm }
|
||||
});
|
||||
roleIds.value = val.map(v => v.dm)
|
||||
const promes = {
|
||||
list: pageData.tableData.map(v => {
|
||||
return {
|
||||
qtid: listData.value.id,
|
||||
xzdm: v.dm,
|
||||
xzmc: v.zdmc,
|
||||
}
|
||||
})
|
||||
}
|
||||
if (props.disabled && props.showBut) {
|
||||
gettbZdqtQtxzBatchAdd(promes)
|
||||
}
|
||||
}
|
||||
// 删除性质标签
|
||||
const delDictItem = (row) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除性质标签',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.dm != row.dm)
|
||||
roleIds.value = roleIds.value.filter(v => v != row.dm)
|
||||
const promes = {ids: [row.id]}
|
||||
deleteTbZdqtQtxzBatchDelete(promes)
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message({
|
||||
message: '删除失败',
|
||||
type: 'info',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.dm != row.dm)
|
||||
roleIds.value = roleIds.value.filter(v => v != row.dm)
|
||||
}
|
||||
}
|
||||
// 抛出数据并验证性质列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// 验证：确保性质列表不为空
|
||||
// if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
// throw new Error('请选择群体性质');
|
||||
// }
|
||||
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>群体管控信息</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="chooseMarksVisible = true">选择</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #type="{ row }">
|
||||
<DictTag :tag="false" :value="row.type" :options="D_BZ_RYJZLB" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<ChooseUser :Single="false" v-model="chooseMarksVisible" @choosedUsers="addMarks" :roleIds="roleIds" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import ChooseUser from "@/components/ChooseList/ChooseUser/index.vue";
|
||||
import { tbZdqtGkxxBatchAdd, tbZdqtGkxxDelete, tbZdqtGkxxSelectPage } from '@/api/qt.js'
|
||||
import { ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const { D_BZ_RYJZLB } = proxy.$dict('D_BZ_RYJZLB')
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'userName',
|
||||
label: '管控人员',
|
||||
}, {
|
||||
prop: 'type',
|
||||
label: '管控警种',
|
||||
showOverflowTooltip: true,
|
||||
showSolt: true,
|
||||
|
||||
}, {
|
||||
prop: 'inDustRialId',
|
||||
label: '警号',
|
||||
|
||||
}, {
|
||||
prop: 'deptName',
|
||||
label: '管控单位',
|
||||
}],
|
||||
tableHeight: '250px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
const listData = ref({})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
pageData.tableData = val.zdryList
|
||||
gettbZdqtGkxxSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
const roleIds = ref([])
|
||||
const chooseMarksVisible = ref(false)
|
||||
// 修改函数
|
||||
const addMarks = (val) => {
|
||||
pageData.tableData = val
|
||||
roleIds.value = val.map(item => item.id)
|
||||
if (!props.disabled && props.showBut) {
|
||||
const promes = {
|
||||
list: pageData.tableData.map(item => {
|
||||
return {
|
||||
qtid: listData.value.id,
|
||||
gkdwdm: item.deptId,
|
||||
gkdwmc: item.deptName,
|
||||
gkjz: item.type,
|
||||
jh: item.inDustRialId,
|
||||
xm: item.userName,
|
||||
}
|
||||
})
|
||||
}
|
||||
gettbGsxtZdqtAdd(promes)
|
||||
}
|
||||
}
|
||||
// 删除函数
|
||||
const delDictItem = (row) => {
|
||||
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除管控信息',
|
||||
'提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
pageData.tableData = pageData.tableData.filter(item => item.id !== row)
|
||||
roleIds.value = roleIds.value.filter(id => id !== row)
|
||||
const promes = { ids: [row] }
|
||||
gettbGsxtZdqtDelete(promes)
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(item => item.id !== row)
|
||||
roleIds.value = roleIds.value.filter(id => id !== row)
|
||||
}
|
||||
}
|
||||
// 新增接口
|
||||
const gettbGsxtZdqtAdd = (val) => {
|
||||
tbZdqtGkxxBatchAdd(val).then((res) => {
|
||||
proxy.$message.success('添加成功')
|
||||
}).catch((err) => {
|
||||
proxy.$message.error('操作失败')
|
||||
});
|
||||
}
|
||||
// 删除接口
|
||||
const gettbGsxtZdqtDelete = (val) => {
|
||||
tbZdqtGkxxDelete(val).then((res) => {
|
||||
proxy.$message.success('删除成功')
|
||||
}).catch((err) => {
|
||||
proxy.$message.error('操作失败')
|
||||
});
|
||||
}
|
||||
// 查询接口
|
||||
const gettbZdqtGkxxSelectPage = (val) => {
|
||||
const promes = {
|
||||
pageSize: 1000,
|
||||
pageCurrent: 1,
|
||||
qtid: listData.value.id,
|
||||
}
|
||||
tbZdqtGkxxSelectPage(promes).then(res => {
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
id: item.id,
|
||||
deptId: item.gkdwdm,
|
||||
deptName: item.gkdwmc,
|
||||
type: item.gkjz,
|
||||
inDustRialId: item.jh,
|
||||
userName: item.xm,
|
||||
}
|
||||
})
|
||||
roleIds.value = res.records.map(item => item.id)
|
||||
})
|
||||
}
|
||||
|
||||
// 抛出数据
|
||||
const throwData = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 验证是否有管控人员
|
||||
// if (pageData.tableData.length === 0) {
|
||||
// reject(new Error('请选择管控人员'));
|
||||
// return;
|
||||
// }
|
||||
|
||||
const transformedData = pageData.tableData.map(item => {
|
||||
return {
|
||||
gkdwdm: item.deptId,
|
||||
gkdwmc: item.deptName,
|
||||
gkjz: item.type,
|
||||
jh: item.inDustRialId,
|
||||
xm: item.userName,
|
||||
}
|
||||
});
|
||||
|
||||
resolve(transformedData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
|
||||
<div class="backinfo-container">
|
||||
<div class="headClass" style="">
|
||||
<h3 >主要诉求信息</h3>
|
||||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="gettbGsxtZdqtUpdate">保存</el-button>
|
||||
</div>
|
||||
<el-input v-model="zyxx" :disabled="disabled" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入主要诉求信息"
|
||||
class="background-info-input" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { tbGsxtZdqtUpdate } from '@/api/qt.js'
|
||||
|
||||
const zyxx = ref('')
|
||||
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref()
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
zyxx.value = val.zyxx
|
||||
}
|
||||
}, { deep: true })
|
||||
const gettbGsxtZdqtUpdate = () => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
tbGsxtZdqtUpdate({
|
||||
id: listData.value.id,
|
||||
zyxx: zyxx.value
|
||||
}).then((res) => {
|
||||
ElMessage.success('修改成功')
|
||||
}).catch((err) => {
|
||||
ElMessage.error('修改失败')
|
||||
});
|
||||
}
|
||||
}
|
||||
// 抛出数据
|
||||
const throwData = () => {
|
||||
return zyxx.value
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.background-info-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-attachment-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.file-list-container {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.file-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #909399;
|
||||
}
|
||||
|
||||
.empty-file-list {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #e6f7ff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-actions .el-button {
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-actions .el-button:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: #f56c6c !important;
|
||||
}
|
||||
|
||||
.upload-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.headClass{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
h3{
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
|
||||
<div class="backinfo-container">
|
||||
<div class="headClass" style="">
|
||||
<h3>群体特征信息</h3>
|
||||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="gettbGsxtZdqtUpdate">保存</el-button>
|
||||
</div>
|
||||
<el-input v-model="qttz" :disabled="disabled" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea"
|
||||
placeholder="请输入背景信息" class="background-info-input" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { tbGsxtZdqtUpdate } from '@/api/qt.js'
|
||||
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref()
|
||||
const qttz = ref('')
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
qttz.value = val.qttz
|
||||
}
|
||||
}, { deep: true })
|
||||
const gettbGsxtZdqtUpdate = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
tbGsxtZdqtUpdate({
|
||||
id: listData.value.id,
|
||||
qttz: qttz.value
|
||||
}).then((res) => {
|
||||
ElMessage.success('修改成功')
|
||||
}).catch((err) => {
|
||||
ElMessage.error('修改失败')
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
// 抛出数据
|
||||
const throwData = () => {
|
||||
return qttz.value
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.background-info-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-attachment-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.file-list-container {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.file-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #909399;
|
||||
}
|
||||
|
||||
.empty-file-list {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #e6f7ff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-actions .el-button {
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-actions .el-button:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: #f56c6c !important;
|
||||
}
|
||||
|
||||
.upload-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,300 @@
|
||||
import request from '@/utils/request';
|
||||
import service from '@/utils/request';
|
||||
import { upImageFileInfo } from '@/api/commit.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 上传单个文件
|
||||
export async function uploadSingleFile(file, options = {}) {
|
||||
try {
|
||||
// 获取文件对象，确保能够正确访问文件信息
|
||||
const fileObj = file.file || file;
|
||||
|
||||
// 创建临时文件对象用于显示
|
||||
const tempFile = {
|
||||
id: `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||||
originalName: fileObj.name,
|
||||
uploading: true
|
||||
};
|
||||
|
||||
if (options.uploadedFiles) {
|
||||
options.uploadedFiles.push(tempFile);
|
||||
}
|
||||
|
||||
const isImageFile = fileObj.type.startsWith('image/');
|
||||
// 只有图片文件才压缩
|
||||
let fileData = isImageFile && options.compressImage ? await options.compressImage(fileObj) : fileObj;
|
||||
|
||||
const data = new FormData();
|
||||
data.append("file", fileData);
|
||||
|
||||
// 更新UI状态
|
||||
if (file.status !== undefined) {
|
||||
file.status = "uploading";
|
||||
file.message = "上传中...";
|
||||
}
|
||||
|
||||
const res = await upImageFileInfo(data);
|
||||
|
||||
// 更新文件状态
|
||||
if (options.uploadedFiles) {
|
||||
const fileIndex = options.uploadedFiles.findIndex(f => f.id === tempFile.id);
|
||||
if (fileIndex !== -1) {
|
||||
options.uploadedFiles[fileIndex] = {
|
||||
id: res.id || tempFile.id,
|
||||
originalName: fileObj.name,
|
||||
uploading: false,
|
||||
url: res.url,
|
||||
fileSize: fileObj.size
|
||||
};
|
||||
// 更新文件ID列表
|
||||
if (options.fjIds) {
|
||||
options.fjIds.push(res);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新文件状态
|
||||
if (file.status !== undefined) {
|
||||
file.status = "done";
|
||||
file.message = "上传成功";
|
||||
file.id = res.id || tempFile.id;
|
||||
file.url = res.url;
|
||||
file.originalName = fileObj.name;
|
||||
file.fileSize = fileObj.size;
|
||||
}
|
||||
|
||||
ElMessage.success('文件上传成功');
|
||||
return res;
|
||||
|
||||
} catch (error) {
|
||||
console.error('文件上传失败:', error);
|
||||
ElMessage.error('文件上传失败');
|
||||
|
||||
// 更新文件状态
|
||||
if (file && file.status !== undefined) {
|
||||
file.status = "failed";
|
||||
file.message = "上传失败";
|
||||
}
|
||||
|
||||
// 获取可能的文件名用于查找
|
||||
const fileName = (file.file?.originalName || file.originalName || '');
|
||||
|
||||
// 移除上传失败的文件
|
||||
if (options.uploadedFiles) {
|
||||
const fileIndex = options.uploadedFiles.findIndex(f =>
|
||||
f.originalName === fileName && f.uploading
|
||||
);
|
||||
if (fileIndex !== -1) {
|
||||
options.uploadedFiles.splice(fileIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传多个文件
|
||||
export async function uploadMultipleFiles(files, options = {}) {
|
||||
if (Array.isArray(files)) {
|
||||
// 多个文件上传
|
||||
const results = [];
|
||||
for (const file of files) {
|
||||
try {
|
||||
const result = await uploadSingleFile(file, options);
|
||||
results.push(result);
|
||||
} catch (error) {
|
||||
// 可以选择继续上传其他文件或者中断
|
||||
if (!options.continueOnError) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
return results;
|
||||
} else {
|
||||
// 单个文件上传
|
||||
return [await uploadSingleFile(files, options)];
|
||||
}
|
||||
}
|
||||
|
||||
// Element Plus 的 el-upload 上传函数
|
||||
// export function upImageFileInfo(data) {
|
||||
// return service({
|
||||
// url: '/mosty-api/mosty-base/minio/file/uploadObj',
|
||||
// method: 'post',
|
||||
// data
|
||||
// });
|
||||
// }
|
||||
|
||||
// 文件下载函数
|
||||
export function downloadFile(fileUrl, fileName = '') {
|
||||
return new Promise((resolve, reject) => {
|
||||
const token = localStorage.getItem('token');
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.open('GET', fileUrl, true);
|
||||
xhr.setRequestHeader('Authorization', token);
|
||||
xhr.responseType = 'blob';
|
||||
|
||||
xhr.onload = function () {
|
||||
if (this.status === 200) {
|
||||
const blob = this.response;
|
||||
const link = document.createElement('a');
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
|
||||
link.href = url;
|
||||
link.download = fileName || 'download';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// 清理
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
ElMessage.error('文件下载失败');
|
||||
reject(new Error('下载失败'));
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function () {
|
||||
ElMessage.error('网络错误，下载失败');
|
||||
reject(new Error('网络错误'));
|
||||
};
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
// 删除文件前确认
|
||||
export function beforeDelete(file) {
|
||||
return new Promise((resolve) => {
|
||||
// 创建一个简单的确认对话框
|
||||
const confirmed = window.confirm(`确定要删除文件"${file.originalName || file.name}"吗？`);
|
||||
resolve(confirmed);
|
||||
});
|
||||
}
|
||||
|
||||
// 删除文件
|
||||
export async function deleteFile(file, options = {}) {
|
||||
try {
|
||||
// 显示确认对话框
|
||||
const confirm = await beforeDelete(file);
|
||||
|
||||
if (confirm) {
|
||||
const fileId = file.id;
|
||||
const url = options.url || '/mosty-api/mosty-base/minio/file/delete';
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
// 调用删除API
|
||||
const res = await request({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data: { fileId },
|
||||
headers: {
|
||||
'Authorization': token
|
||||
}
|
||||
});
|
||||
|
||||
if (res.code === 10000 || res.status === 200) {
|
||||
// 从已上传文件列表中移除
|
||||
if (options.uploadedFiles) {
|
||||
const fileIndex = options.uploadedFiles.findIndex(f =>
|
||||
f.id === file.id || f.originalName === file.originalName
|
||||
);
|
||||
if (fileIndex !== -1) {
|
||||
options.uploadedFiles.splice(fileIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 从fileList中移除
|
||||
if (options.fileList) {
|
||||
const listIndex = options.fileList.findIndex(f => f.id === file.id);
|
||||
if (listIndex !== -1) {
|
||||
options.fileList.splice(listIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 从fjIds中移除
|
||||
if (options.fjIds) {
|
||||
const fjIndex = options.fjIds.findIndex(f => f.id === file.id);
|
||||
if (fjIndex !== -1) {
|
||||
options.fjIds.splice(fjIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
ElMessage.success('文件删除成功');
|
||||
return res;
|
||||
} else {
|
||||
ElMessage.error('文件删除失败');
|
||||
throw new Error('删除失败');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('文件删除失败:', error);
|
||||
ElMessage.error('文件删除失败');
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
export function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// el-upload 组件配置生成器
|
||||
export function generateUploadConfig(options = {}) {
|
||||
const {
|
||||
limit = 3,
|
||||
accept = '',
|
||||
action = '/mosty-api/mosty-base/minio/image/upload/id',
|
||||
onSuccess = () => { },
|
||||
onRemove = () => { },
|
||||
onExceed = () => { },
|
||||
beforeRemove = () => { },
|
||||
beforeUpload = () => { }
|
||||
} = options;
|
||||
|
||||
// 获取token
|
||||
const getToken = () => {
|
||||
return localStorage.getItem('token');
|
||||
};
|
||||
|
||||
return {
|
||||
headers: {
|
||||
'Authorization': getToken()
|
||||
},
|
||||
action: action,
|
||||
multiple: true,
|
||||
limit: limit,
|
||||
accept: accept,
|
||||
showFileList: true,
|
||||
onSuccess: (response, uploadFile, uploadFiles) => {
|
||||
ElMessage.success('上传成功');
|
||||
onSuccess(response, uploadFile, uploadFiles);
|
||||
},
|
||||
onRemove: (uploadFile, uploadFiles) => {
|
||||
onRemove(uploadFile, uploadFiles);
|
||||
},
|
||||
onExceed: (files, uploadFiles) => {
|
||||
ElMessage.warning(`最多只能上传 ${limit} 个文件`);
|
||||
onExceed(files, uploadFiles);
|
||||
},
|
||||
beforeRemove: (uploadFile, uploadFiles) => {
|
||||
const result = beforeRemove(uploadFile, uploadFiles);
|
||||
if (result === undefined) {
|
||||
return window.confirm(`确定移除 ${uploadFile.name}？`);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
beforeUpload: (file) => {
|
||||
return beforeUpload(file);
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>群体标签</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="chooseMarksVisible = true">选择</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #bqLx="{ row }">
|
||||
<DictTag :tag="false" :value="row.bqLx" :options="D_GS_BQ_DJ" />
|
||||
</template>
|
||||
<template #bqLb="{ row }">
|
||||
<DictTag :tag="false" :value="row.bqLb" :options="D_GS_SSYJ" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.bqId)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<ChooseMarks v-model="chooseMarksVisible" @choosed="addMarks" :roleIds="roleIds" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import ChooseMarks from "@/components/ChooseList/ChooseMarks/index.vue";
|
||||
import { tbGsxtZdqtUpdate } from '@/api/qt.js'
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_BQ_DJ, D_GS_SSYJ } = proxy.$dict("D_GS_BQ_DJ", "D_GS_SSYJ"); //获取字典数据
|
||||
const chooseMarksVisible = ref(false)
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData = ref({})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
pageData.tableData = val.bqList
|
||||
}
|
||||
}, { deep: true })
|
||||
const roleIds = ref([])
|
||||
// 表格数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'bqMc',
|
||||
label: '标签名称',
|
||||
showOverflowTooltip: true
|
||||
}, {
|
||||
prop: 'bqDm',
|
||||
label: '标签代码',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'bqLx',
|
||||
label: '标签类型',
|
||||
}, {
|
||||
showSolt: true,
|
||||
prop: 'bqLb',
|
||||
label: '标签类别',
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
haveControls: !props.disabled
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
// 修改数据接口
|
||||
const zdqtUpdate = (val) => {
|
||||
const params = {
|
||||
id: listData.value.id,
|
||||
bqList: pageData.tableData
|
||||
}
|
||||
tbGsxtZdqtUpdate(params).then(res => {
|
||||
proxy.$message({
|
||||
message: val,
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 新增标签
|
||||
const addMarks = (val) => {
|
||||
pageData.tableData = val.map(v => {
|
||||
return { bqDm: v.bqDm, bqId: v.id, bqLb: v.bqLb, bqLx: v.bqLx, bqMc: v.bqMc }
|
||||
});
|
||||
roleIds.value = val.map(v => v.id)
|
||||
if (!props.disabled && props.showBut) {
|
||||
zdqtUpdate("标签添加成功")
|
||||
}
|
||||
}
|
||||
// 删除标签
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除标签',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.bqId != val)
|
||||
roleIds.value = roleIds.value.filter(v => v != val)
|
||||
zdqtUpdate("标签删除成功")
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(v => v.bqId != val)
|
||||
roleIds.value = roleIds.value.filter(v => v != val)
|
||||
}
|
||||
|
||||
}
|
||||
// 抛出数据并验证标签列表不为空
|
||||
const throwData = () => {
|
||||
return new Promise((resolve) => {
|
||||
// 验证：确保标签列表不为空
|
||||
if (!pageData.tableData || pageData.tableData.length === 0) {
|
||||
throw new Error('请选择群体标签');
|
||||
}
|
||||
|
||||
resolve(pageData.tableData);
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>集会历史</h3>
|
||||
<el-button type="primary" @click="openHistory" v-if="showBut">新增</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #timeQuantum="{ row }">
|
||||
{{ `${row.kssj}至${row.jssj}` }}
|
||||
</template>
|
||||
<template #ssry="{ row }">
|
||||
<span v-for="(item, index) in row.ssry" :key="index">{{ item.ryXm }}<span
|
||||
v-if="index < row.ssry.length - 1">,</span></span>
|
||||
</template>
|
||||
<template #fj="{ row }">
|
||||
<span v-for="(item, index) in row.fj" :key="index">{{ item.originalName }}<span
|
||||
v-if="index < row.fj.length - 1">,</span></span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="modification(row)">修改</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<History v-model="historyShow" @comfirm="onComfirm" :data="dataAmend" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch, getCurrentInstance } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { tbZdqtLsjhAdd, tbZdqtLsjhDelete, tbZdqtLsjhSelectPage, tbZdqtLsjhUpdate } from '@/api/qt.js'
|
||||
import History from "../component/history.vue";
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'timeQuantum',
|
||||
label: '活动时间',
|
||||
showSolt: true
|
||||
}, {
|
||||
prop: 'gjxw',
|
||||
label: '过激行为',
|
||||
}, {
|
||||
prop: 'hdcs',
|
||||
label: '活动场所',
|
||||
}, {
|
||||
prop: 'ssry',
|
||||
label: '涉事人员',
|
||||
showSolt: true
|
||||
}, {
|
||||
prop: 'fj',
|
||||
label: '附件',
|
||||
showSolt: true
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
const listData = ref({})
|
||||
const butShow = ref(true)
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
gettbZdqtLsjhSelectPage()
|
||||
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
const historyShow = ref(false);
|
||||
const dataAmend = ref({});
|
||||
const onComfirm = (val) => {
|
||||
let promes = {
|
||||
kssj: val.kssj,
|
||||
jssj: val.jssj,
|
||||
gjxw: val.gjxw,
|
||||
hdcs: val.hdcs,
|
||||
ssry: JSON.stringify(val.ssry),
|
||||
fj: val.fileList.length > 0 ? JSON.stringify(val.fileList) : '',
|
||||
qtid: listData.value.id
|
||||
}
|
||||
if (butShow.value) {
|
||||
tbZdqtLsjhAdd(promes).then((res) => {
|
||||
gettbZdqtLsjhSelectPage()
|
||||
proxy.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
promes.id=val.id
|
||||
tbZdqtLsjhUpdate(promes).then((res) => {
|
||||
gettbZdqtLsjhSelectPage()
|
||||
proxy.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const openHistory = () => {
|
||||
butShow.value=true
|
||||
historyShow.value = true;
|
||||
}
|
||||
// 列表
|
||||
const gettbZdqtLsjhSelectPage = () => {
|
||||
const promes = {
|
||||
qtid: listData.value.id,
|
||||
pageSize: 1000,
|
||||
pageCurrent: 1
|
||||
}
|
||||
tbZdqtLsjhSelectPage(promes).then((res) => {
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
ssry: item.ssry ? JSON.parse(item.ssry) : [],
|
||||
fj: item.fj ? JSON.parse(item.fj) : [],
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
const delDictItem = (val) => {
|
||||
|
||||
ElMessageBox.confirm(
|
||||
'是否删除该记录?',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const promes = { ids: [val] }
|
||||
tbZdqtLsjhDelete(promes).then((res) => {
|
||||
gettbZdqtLsjhSelectPage()
|
||||
proxy.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
// 修改
|
||||
const modification = (val) => {
|
||||
butShow.value=false
|
||||
historyShow.value = true;
|
||||
dataAmend.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>群体背景信息</h3>
|
||||
<el-button type="primary" v-if="showBut" :disabled="disabled" @click="gettbGsxtZdqtUpdate">保存</el-button>
|
||||
</div>
|
||||
<FormMessage v-model="listQuery" :formList="formData" labelWidth="120px" ref="elform" :rules="rules">
|
||||
<template #qtzp>
|
||||
<div style="width: 100%; padding-left: 50px">
|
||||
<MOSTY.Upload :showBtn="false" :limit="1" v-model="listQuery.qtzp" />
|
||||
</div>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, reactive, getCurrentInstance } from "vue";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { tbGsxtZdqtUpdate } from '@/api/qt'
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
watch(() => props.dataList, (val) => {
|
||||
listQuery.value = { ...val }
|
||||
}, { deep: true })
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_ZDQT_FXDJ, D_GS_ZDQT_LB, D_GS_ZDR_YJDJ, D_BZ_RCBKZT, D_ZDQT_QTXZ } =
|
||||
proxy.$dict('D_GS_ZDQT_FXDJ', 'D_GS_ZDQT_LB', 'D_GS_ZDR_YJDJ', 'D_BZ_RCBKZT', 'D_ZDQT_QTXZ')
|
||||
const formData = ref([
|
||||
{ label: "群体名称", prop: "qtMc", type: "input", width: '30%' },
|
||||
{ label: "群体别名", prop: "qtBm", type: "input", width: '30%' },
|
||||
{ label: "风险等级", prop: "qtFxdj", type: "select", options: D_GS_ZDQT_FXDJ, width: '30%' },
|
||||
{ label: "群体类别", prop: "qtLb", type: "select", options: D_GS_ZDQT_LB, width: '30%' },
|
||||
{ label: "预警等级", prop: "zdrYjdj", type: "select", options: D_GS_ZDR_YJDJ, width: '30%' },
|
||||
{ label: "布控状态", prop: "bkzt", type: "select", options: D_BZ_RCBKZT, width: '30%' },
|
||||
{ label: "群体成立时间", prop: "qtClsj", type: "date", width: '30%' },
|
||||
{ label: "入库时间", prop: "zdrRkkssj", type: "datetime", width: '30%' },
|
||||
{ label: "出库时间", prop: "zdrRkjssj", type: "datetime", width: '30%' },
|
||||
{ label: "所属部门", prop: "gxSsbmdm", type: "department", width: '30%' },
|
||||
{ label: "群体照片", prop: "qtzp", type: "slot", width: '60%' },
|
||||
|
||||
])
|
||||
const listQuery = ref({})
|
||||
const elform = ref(null)
|
||||
const rules = reactive({
|
||||
qtMc: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
|
||||
qtFxdj: [{ required: true, message: "请选择风险等级", trigger: "change" }],
|
||||
qtLb: [{ required: true, message: "请选择群体类别", trigger: "change" }],
|
||||
bkzt: [{ required: true, message: "请选择布控状态", trigger: "change" }],
|
||||
qtClsj: [{ required: true, message: "请选择群体成立时间", trigger: "change" }],
|
||||
zdrYjdj: [{ required: true, message: "请选择所预警等级", trigger: "change" }]
|
||||
})
|
||||
const gettbGsxtZdqtUpdate = () => {
|
||||
const promes = { ...listQuery.value, qtzp: listQuery.value.qtzp ? listQuery.value.qtzp.toString() : '' }
|
||||
tbGsxtZdqtUpdate(promes).then((res) => {
|
||||
proxy.$message({
|
||||
message: '更新成功',
|
||||
type: 'success'
|
||||
})
|
||||
}).catch((err) => {
|
||||
|
||||
});
|
||||
}
|
||||
// 抛出数据并验证表单
|
||||
const throwData = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (elform.value && elform.value.validate) {
|
||||
elform.value.validate((valid) => {
|
||||
if (valid) {
|
||||
resolve({ ...listQuery.value, qtzp: listQuery.value.qtzp ? listQuery.value.qtzp.toString() : '' });
|
||||
} else {
|
||||
reject(new Error('表单验证失败，请检查输入信息'));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 如果没有验证方法，直接返回数据
|
||||
resolve({ ...listQuery.value, qtzp: listQuery.value.qtzp ? listQuery.value.qtzp.toString() : '' });
|
||||
}
|
||||
});
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .form-item-box {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>工作记录</h3>
|
||||
<el-button type="primary" v-if="showBut" @click="openHistory">新增</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #fj="{ row }">
|
||||
<span v-for="(item, index) in row.fj" :key="index">{{ item.originalName }}<span
|
||||
v-if="index < row.fj.length - 1">,</span></span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="modification(row)">修改</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<Record v-model="recordShow" @comfirm="onComfirm" :data="dataAmend" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { tbZdqtGzjlAdd, tbZdqtGzjlDelete, tbZdqtGzjlSelectPage, tbZdqtGzjlUpdate } from '@/api/qt.js'
|
||||
import Record from "../component/record.vue";
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'xm',
|
||||
label: '民警',
|
||||
}, {
|
||||
prop: 'sfzh',
|
||||
label: '身份证号',
|
||||
}, {
|
||||
prop: 'gzjl',
|
||||
label: '工作记录',
|
||||
},{
|
||||
prop: 'ssbm',
|
||||
label: '所属部门',
|
||||
},{
|
||||
prop: 'gzjl',
|
||||
label: '工作记录',
|
||||
}, {
|
||||
prop: 'fj',
|
||||
label: '附件',
|
||||
showSolt: true
|
||||
}],
|
||||
tableHeight: '200px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
const listData = ref({})
|
||||
const butShow = ref(true)
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
gettbZdqtLsjhSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
const recordShow = ref(false);
|
||||
const dataAmend = ref({});
|
||||
const onComfirm = (val) => {
|
||||
let promes = {
|
||||
gzjl: val.gzjl,
|
||||
sfzh: val.sfzh,
|
||||
ssbm: val.ssbm,
|
||||
ssbmdm:val.ssbmdm,
|
||||
xm: val.xm,
|
||||
fj: val.fileList.length > 0 ? JSON.stringify(val.fileList) : '',
|
||||
qtid: listData.value.id
|
||||
}
|
||||
if (butShow.value) {
|
||||
tbZdqtGzjlAdd(promes).then((res) => {
|
||||
gettbZdqtLsjhSelectPage()
|
||||
proxy.$message({
|
||||
message: '添加成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
promes.id=val.id
|
||||
tbZdqtGzjlUpdate(promes).then((res) => {
|
||||
gettbZdqtLsjhSelectPage()
|
||||
proxy.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const openHistory = () => {
|
||||
butShow.value=true
|
||||
recordShow.value = true;
|
||||
}
|
||||
// 列表
|
||||
const gettbZdqtLsjhSelectPage = () => {
|
||||
const promes = {
|
||||
qtid: listData.value.id,
|
||||
pageSize: 1000,
|
||||
pageCurrent: 1
|
||||
}
|
||||
tbZdqtGzjlSelectPage(promes).then((res) => {
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
fj: item.fj ? JSON.parse(item.fj) : [],
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
const delDictItem = (val) => {
|
||||
|
||||
ElMessageBox.confirm(
|
||||
'是否删除该记录?',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const promes = { ids: [val] }
|
||||
tbZdqtGzjlDelete(promes).then((res) => {
|
||||
gettbZdqtLsjhSelectPage()
|
||||
proxy.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
// 修改
|
||||
const modification = (val) => {
|
||||
butShow.value=false
|
||||
recordShow.value = true;
|
||||
dataAmend.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>研判记录</h3>
|
||||
<el-button type="primary" v-if="showBut" @click="openJudgment">新增</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #fj="{row}">
|
||||
<span v-for="(item,index) in row.fj" :key="index">{{ item.originalName }}<span v-if="index < row.fj.length - 1">、</span></span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="updeteRecord(row)">修改</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<JudgmentRecord v-model="JudgmentShow" @comfirm="onComfirm" :data="dataAmend" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { tbZdqtYpAdd, tbZdqtYpDelete, tbZdqtYpSelectPage, tbZdqtYpUpdate } from '@/api/qt.js'
|
||||
import JudgmentRecord from '../component/judgmentRecord.vue'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'ypnr',
|
||||
label: '研判内容',
|
||||
}, {
|
||||
prop: 'fj',
|
||||
label: '附件',
|
||||
showSolt: true,
|
||||
}],
|
||||
tableHeight: '300px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
controlsWidth: 200,
|
||||
})
|
||||
const listData = ref({})
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
gettbZdqtYpSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
const JudgmentShow = ref(false)
|
||||
const modifyShow = ref(true)
|
||||
const dataAmend = ref()
|
||||
const onComfirm = (val) => {
|
||||
if (modifyShow.value) {
|
||||
gettbZdqtYpAdd(val)
|
||||
gettbZdqtYpSelectPage()
|
||||
} else {
|
||||
const promes = { ...val,fj:JSON.stringify(val.fileList) }
|
||||
amendantRecord(promes)
|
||||
}
|
||||
}
|
||||
const openJudgment = (val) => {
|
||||
JudgmentShow.value = true;
|
||||
modifyShow.value = true
|
||||
}
|
||||
const delDictItem = (val) => {
|
||||
proxy.$confirm('确定删除吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deletbZdqtYpDelete(val)
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
|
||||
const updeteRecord = (val) => {
|
||||
dataAmend.value = val
|
||||
JudgmentShow.value = true;
|
||||
modifyShow.value = false
|
||||
}
|
||||
|
||||
//查询列表
|
||||
const gettbZdqtYpSelectPage = () => {
|
||||
const promes = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 1000,
|
||||
qtid: props.dataList.id
|
||||
}
|
||||
tbZdqtYpSelectPage(promes).then((res) => {
|
||||
pageData.tableData = res.records.map(item => {
|
||||
return {
|
||||
...item,
|
||||
fj: item.fj ? JSON.parse(item.fj) : []
|
||||
}
|
||||
})
|
||||
}).catch((err) => {
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
const gettbZdqtYpAdd = (val) => {
|
||||
const params = {
|
||||
qtid: listData.value.id,
|
||||
ypnr: val.ypnr,
|
||||
fj: val.fileList.length > 0 ? JSON.stringify(val.fileList) : ''
|
||||
}
|
||||
tbZdqtYpAdd(params).then(res => {
|
||||
gettbZdqtYpSelectPage()
|
||||
proxy.$message({
|
||||
message: '新增成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
const deletbZdqtYpDelete = (id) => {
|
||||
tbZdqtYpDelete({
|
||||
ids: [id]
|
||||
}).then(res => {
|
||||
gettbZdqtYpSelectPage()
|
||||
proxy.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}
|
||||
// 修改
|
||||
const amendantRecord = (val) => {
|
||||
tbZdqtYpUpdate(val).then(res => {
|
||||
gettbZdqtYpSelectPage()
|
||||
proxy.$message({
|
||||
message: '修改成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="headClass" style="">
|
||||
<h3>群体成员</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="openDialog">选择</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<template #ryzp="{ row }">
|
||||
<el-image style="width: 100px; height: 100px" :src="`/mosty-base/minio/file/download/${row.ryzp}`"
|
||||
fit="cover" />
|
||||
</template>
|
||||
<template #zdrYjdj="{ row }">
|
||||
<DictTag :tag="false" :value="row.zdrYjdj" :options="D_GS_ZDR_YJDJ" />
|
||||
</template>
|
||||
<template #zdrZt="{ row }">
|
||||
<DictTag :tag="false" :value="row.zdrZt" :options="D_GS_ZDR_CZZT" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
<GroupStaff v-model="showDialog" @choosed="addMarks" :roleIds="roleIds" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, watch } from "vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import GroupStaff from '../component/groupStaff.vue'
|
||||
import { tbGsxtZdqtUpdate } from '@/api/qt.js'
|
||||
import { ElMessageBox } from "element-plus";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_ZDR_YJDJ, D_GS_ZDR_CZZT } = proxy.$dict("D_GS_ZDR_YJDJ", "D_GS_ZDR_CZZT");
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'ryzp',
|
||||
label: '照片',
|
||||
showSolt: true,
|
||||
}, {
|
||||
prop: 'ryXm',
|
||||
label: '姓名',
|
||||
}, {
|
||||
prop: 'rySfzh',
|
||||
label: '身份证号',
|
||||
}, {
|
||||
prop: 'ywlb',
|
||||
label: '业务类别',
|
||||
}, {
|
||||
prop: 'zdrYjdj',
|
||||
label: '管控级别',
|
||||
showSolt: true,
|
||||
}, {
|
||||
prop: 'zdrZt',
|
||||
label: '布控情况',
|
||||
showSolt: true,
|
||||
}],
|
||||
tableHeight: '400px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
const listData = ref({})
|
||||
const showDialog = ref(false)
|
||||
const roleIds = ref([])
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
pageData.tableData = val.zdryList
|
||||
}
|
||||
}, { deep: true })
|
||||
const openDialog = () => {
|
||||
showDialog.value = true
|
||||
}
|
||||
const addMarks = (val) => {
|
||||
pageData.tableData = val
|
||||
roleIds.value = val.map(item => item.id)
|
||||
if (!props.disabled && props.showBut) {
|
||||
gettbGsxtZdqtUpdate(pageData.tableData)
|
||||
}
|
||||
}
|
||||
// 删除
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除性质标签',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
gettbGsxtZdqtUpdate(pageData.tableData)
|
||||
pageData.tableData = pageData.tableData.filter(item => item.id != val)
|
||||
roleIds.value = roleIds.value.filter(item => item != val)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message({
|
||||
message: '删除失败',
|
||||
type: 'info',
|
||||
})
|
||||
})
|
||||
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(item => item.id != val)
|
||||
roleIds.value = roleIds.value.filter(item => item != val)
|
||||
}
|
||||
}
|
||||
// 修改
|
||||
const gettbGsxtZdqtUpdate = (val) => {
|
||||
const promes = {
|
||||
id: listData.value.id,
|
||||
zdryList: val
|
||||
}
|
||||
tbGsxtZdqtUpdate(promes).then((res) => {
|
||||
proxy.$message({
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
})
|
||||
}).catch((err) => {
|
||||
|
||||
});
|
||||
}
|
||||
const throwData = () => {
|
||||
return pageData.tableData
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.left_box {
|
||||
width: 200px;
|
||||
border: 1px solid #c8c8c89a;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.right_box {
|
||||
width: calc(100% - 230px);
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
|
||||
<div class="backinfo-container">
|
||||
<div class="headClass" style="">
|
||||
<h3>群体成员画像</h3>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div style="width: 50%;"><PieChart :chartData="ywlbtj" title="业务类型"/></div>
|
||||
<div style="width: 50%;"><BarChart :chartData="gkjbtj" title="管控级别分布"/></div>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div style="width: 50%;"><PieChart :chartData="qytj" title="区域分布"/></div>
|
||||
<div style="width: 50%;"><BarChart :chartData="zyfbtj" title="管控级别分布"/></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div style="width: 50%;"><LineChart :chartData="nlfbtj" title="年龄分布"/></div>
|
||||
<div style="width: 50%;"><PieChart :chartData="whcdtj" title="文化程度分布"/></div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref ,watch} from "vue";
|
||||
import { zdryGkjbtj ,zdryYwlbtj,zdryQytj,zdryNldtj,zdryZclbtj,zdryWhcdtj,tbGsxtZdqtSave} from '@/api/qt.js'
|
||||
import BarChart from "../component/BarChart.vue"
|
||||
import PieChart from "../component/PieChart.vue"
|
||||
import LineChart from "../component/LineChart.vue"
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const listData=ref()
|
||||
watch(()=>props.dataList,(val)=>{
|
||||
if (val) {
|
||||
listData.value = val
|
||||
funAll()
|
||||
}
|
||||
}, { deep: true })
|
||||
const ywlbtj=ref()
|
||||
const gkjbtj = ref({
|
||||
xAxisData: [],
|
||||
seriesData:[]
|
||||
})
|
||||
const qytj = ref()
|
||||
const zyfbtj = ref({
|
||||
xAxisData: [],
|
||||
seriesData:[]
|
||||
})
|
||||
const nlfbtj = ref({
|
||||
xAxisData: [],
|
||||
seriesData:[]
|
||||
})
|
||||
const whcdtj=ref()
|
||||
const funAll = () => {
|
||||
const params = {
|
||||
qtid: listData.value.id
|
||||
}
|
||||
getzdryYwlbtj(params)
|
||||
getzdryGkjbtj(params)
|
||||
getzdryQytj(params)
|
||||
getzdryZclbtj(params)
|
||||
getzdryNldtj(params)
|
||||
getzdryWhcdtj(params)
|
||||
}
|
||||
// 业务类型
|
||||
const getzdryYwlbtj = (val) => {
|
||||
zdryYwlbtj(val).then((res) => {
|
||||
ywlbtj.value = {
|
||||
seriesData: res.map(item => {
|
||||
return {
|
||||
name: item.mc,
|
||||
value: item.sl
|
||||
}
|
||||
})
|
||||
}
|
||||
}).catch((err) => {
|
||||
|
||||
});
|
||||
}
|
||||
// 管控级别分布
|
||||
const getzdryGkjbtj = (val) => {
|
||||
zdryGkjbtj(val).then(res => {
|
||||
gkjbtj.value.xAxisData=res.map(item=>item.mc)
|
||||
gkjbtj.value.seriesData = [{
|
||||
name: '管控级别',
|
||||
data: res.map(item => item.sl),
|
||||
color: '#409EFF'
|
||||
}]
|
||||
})
|
||||
}
|
||||
// 区域分布
|
||||
const getzdryQytj = (val) => {
|
||||
zdryQytj(val).then(res => {
|
||||
qytj.value = {
|
||||
seriesData: res.map(item => {
|
||||
return {
|
||||
name: item.ssbm,
|
||||
value: item.number
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 职业分布
|
||||
const getzdryZclbtj = (val) => {
|
||||
zdryZclbtj(val).then(res => {
|
||||
zyfbtj.value.xAxisData = res.map(item => item.mc)
|
||||
zyfbtj.value.seriesData = [{
|
||||
name: '职业分布',
|
||||
data: res.map(item => item.sl),
|
||||
color: '#409EFF'
|
||||
}]
|
||||
})
|
||||
}
|
||||
// 年龄分布
|
||||
const getzdryNldtj = (val) => {
|
||||
zdryNldtj(val).then(res => {
|
||||
console.log(res);
|
||||
nlfbtj.value.xAxisData = res.map(item => item.mc)
|
||||
nlfbtj.value.seriesData = [{
|
||||
name: '年龄分布',
|
||||
data: res.map(item => item.sl),
|
||||
color: '#409EFF'
|
||||
}]
|
||||
})
|
||||
}
|
||||
// 文化程度统计
|
||||
const getzdryWhcdtj = (val) => {
|
||||
zdryWhcdtj(val).then(res => {
|
||||
whcdtj.value = {
|
||||
seriesData: res.map(item => {
|
||||
return {
|
||||
name: item.mc,
|
||||
value: item.sl
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.background-info-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-attachment-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.file-list-container {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.file-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #909399;
|
||||
}
|
||||
|
||||
.empty-file-list {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #e6f7ff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-actions .el-button {
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-actions .el-button:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: #f56c6c !important;
|
||||
}
|
||||
|
||||
.upload-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,472 @@
|
||||
<template>
|
||||
|
||||
<div class="backinfo-container">
|
||||
<div class="headClass" style="">
|
||||
<h3>诉求信息</h3>
|
||||
<el-button type="primary" :disabled="disabled" @click="openAppel">选择</el-button>
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link type="danger" @click="amend(row)">修改</el-link>
|
||||
<el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<!-- 文件列表区域 -->
|
||||
<div class="file-attachment-section">
|
||||
<div class="section-title">相关附件</div>
|
||||
<div class="file-list-container">
|
||||
<div v-if="fileList.length === 0" class="empty-file-list">暂无附件</div>
|
||||
<div v-else class="file-list">
|
||||
<div v-for="(file, index) in fileList" :key="index" class="file-item">
|
||||
<div class="file-info">
|
||||
<span class="file-name">{{ file.originalName }}</span>
|
||||
<span class="file-time">{{ file.uploadTime }}</span>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<el-button type="text" size="small" @click="downloadFile(file)" title="下载文件">
|
||||
<el-icon>
|
||||
<Download />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="deleteFile(index)" title="删除文件" class="delete-btn">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传按钮区域 -->
|
||||
<div class="upload-btn-container">
|
||||
<el-upload v-model:file-list="fileList" class="upload-demo" :show-file-list="false" multiple
|
||||
:http-request="handleUploadRequest" :on-remove="handleRemove" :limit="3" :on-exceed="handleExceed">
|
||||
<el-button type="primary" :disabled="disabled">上传文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Appeal v-model="appelShow" @comfirm="onComfirm" :data="dataAmend" />
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Delete, Download } from '@element-plus/icons';
|
||||
import { tbZdqtSqAdd, tbZdqtSqSelectPage, tbZdqtSqDelete, tbZdqtSqUpdate, tbGsxtZdqtUpdate } from '@/api/qt'
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { uploadMultipleFiles } from './fileUp'
|
||||
import Appeal from '../component/appeal.vue'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Object,
|
||||
default: () => { },
|
||||
}, disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showBut: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
})
|
||||
const amendAdd = ref(true)
|
||||
const appelShow = ref(false)
|
||||
const listData = ref({})
|
||||
const dataAmend = ref()
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
tableColumn: [{
|
||||
prop: 'sqnr',
|
||||
label: '诉求',
|
||||
}],
|
||||
tableHeight: '300px',
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
border: true,
|
||||
stripe: true,
|
||||
showHeader: true,
|
||||
showIndex: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 60,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
controlsWidth: 120,
|
||||
|
||||
})
|
||||
// 打开弹窗
|
||||
const openAppel = () => {
|
||||
appelShow.value = true
|
||||
amendAdd.value = true
|
||||
}
|
||||
|
||||
// 修改方法
|
||||
const amend = (val) => {
|
||||
amendAdd.value = false
|
||||
appelShow.value = true
|
||||
dataAmend.value = val
|
||||
}
|
||||
// 监听数据
|
||||
watch(() => props.dataList, (val) => {
|
||||
if (val) {
|
||||
listData.value = val
|
||||
fileList.value = val.sqfj ? JSON.parse(val.sqfj) : []
|
||||
gettbZdqtSqSelectPage()
|
||||
}
|
||||
}, { deep: true })
|
||||
// 新增修改
|
||||
const onComfirm = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
let promes = {
|
||||
qtid: listData.value.id,
|
||||
sqnr: val.sqnr,
|
||||
}
|
||||
if (amendAdd.value) {
|
||||
tbZdqtSqAdd(promes).then(() => {
|
||||
gettbZdqtSqSelectPage()
|
||||
proxy.$message({
|
||||
message: '添加成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
promes.id = val.id
|
||||
tbZdqtSqUpdate(promes).then(() => {
|
||||
gettbZdqtSqSelectPage()
|
||||
proxy.$message({
|
||||
message: '修改成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (amendAdd.value) {
|
||||
pageData.tableData.push(val)
|
||||
} else {
|
||||
let index = pageData.tableData.findIndex(item => item.id === val.id)
|
||||
pageData.tableData[index] = val
|
||||
}
|
||||
}
|
||||
}
|
||||
// 删除
|
||||
const delDictItem = (val) => {
|
||||
if (!props.disabled && props.showBut) {
|
||||
ElMessageBox.confirm(
|
||||
'是否删除诉求信息',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
tbZdqtSqDelete({ ids: [val] }).then(() => {
|
||||
proxy.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
gettbZdqtSqSelectPage()
|
||||
})
|
||||
.catch(() => {
|
||||
proxy.$message({
|
||||
message: '删除失败',
|
||||
type: 'info',
|
||||
})
|
||||
})
|
||||
} else {
|
||||
pageData.tableData = pageData.tableData.filter(item => item.id !== val)
|
||||
}
|
||||
}
|
||||
// 查询接口
|
||||
const gettbZdqtSqSelectPage = () => {
|
||||
console.log("xxxxxx");
|
||||
|
||||
const promes = {
|
||||
pageCurrent: 1,
|
||||
pageSize: 1000,
|
||||
qtid: listData.value.id
|
||||
}
|
||||
tbZdqtSqSelectPage(promes).then((res) => {
|
||||
pageData.tableData = res.records
|
||||
console.log(res);
|
||||
|
||||
})
|
||||
}
|
||||
// 修改接口
|
||||
const puttbGsxtZdqtUpdate = (str) => {
|
||||
|
||||
const promes = {
|
||||
id: listData.value.id,
|
||||
sqfj: fileList.value.length > 0 ? JSON.stringify(fileList.value) : '',
|
||||
}
|
||||
if (listData.value.id) {
|
||||
tbGsxtZdqtUpdate(promes).then(() => {
|
||||
if (!str) {
|
||||
proxy.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
// 文件列表数据
|
||||
const fileList = ref([])
|
||||
// 正在上传的文件数量
|
||||
const uploadingCount = ref(0)
|
||||
// 下载文件
|
||||
const downloadFile = (file) => {
|
||||
// 实际项目中，这里应该调用下载API
|
||||
console.log('下载文件:', file.name)
|
||||
// 示例：window.open(file.url)
|
||||
}
|
||||
// 删除文件
|
||||
const deleteFile = (index) => {
|
||||
// 实际项目中，这里应该先调用删除API，成功后再从列表中移除
|
||||
fileList.value.splice(index, 1)
|
||||
if (listData.value.id) {
|
||||
puttbGsxtZdqtUpdate()
|
||||
}
|
||||
}
|
||||
// 检查是否所有文件都已上传完成
|
||||
const checkAllFilesUploaded = () => {
|
||||
// 如果没有正在上传的文件，且文件列表不为空，则执行更新
|
||||
if (uploadingCount.value === 0 && fileList.value.length > 0) {
|
||||
puttbGsxtZdqtUpdate('修改成功');
|
||||
}
|
||||
}
|
||||
|
||||
// 上传相关方法
|
||||
const handleUploadRequest = async (options) => {
|
||||
// 增加正在上传的文件计数
|
||||
uploadingCount.value++;
|
||||
try {
|
||||
// 调用uploadMultipleFiles进行文件上传
|
||||
const result = await uploadMultipleFiles(options.file, {
|
||||
uploadedFiles: fileList.value,
|
||||
fjIds: [], // 如果需要保存文件ID列表，可以在这里传递
|
||||
compressImage: null // 可选的图片压缩函数
|
||||
});
|
||||
// 更新文件列表，添加上传时间信息
|
||||
const index = fileList.value.findIndex(f => f.originalName === options.file.name);
|
||||
if (index !== -1) {
|
||||
fileList.value[index].uploadTime = new Date().toLocaleString('zh-CN');
|
||||
}
|
||||
// 调用成功回调
|
||||
if (options.onSuccess) {
|
||||
options.onSuccess(result);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('文件上传失败:', error);
|
||||
// 调用失败回调
|
||||
if (options.onError) {
|
||||
options.onError(error);
|
||||
}
|
||||
} finally {
|
||||
// 减少正在上传的文件计数
|
||||
uploadingCount.value--;
|
||||
// 检查是否所有文件都已上传完成
|
||||
checkAllFilesUploaded();
|
||||
}
|
||||
}
|
||||
const handleRemove = (uploadFile, uploadFiles) => {
|
||||
// 实际项目中，这里应该先调用删除API，成功后再从列表中移除
|
||||
const index = fileList.value.findIndex(f => f.name === uploadFile.name);
|
||||
if (index !== -1) {
|
||||
fileList.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const handleExceed = (files, uploadFiles) => {
|
||||
ElMessage.warning(`最多只能上传 3 个文件`);
|
||||
}
|
||||
// 抛出数据
|
||||
const throwData = () => {
|
||||
return { sqlist: pageData.tableData, fileList: fileList.value }
|
||||
}
|
||||
defineExpose({
|
||||
throwData
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
.backinfo-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.background-info-input {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.file-attachment-section {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.file-list-container {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.file-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.file-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #909399;
|
||||
}
|
||||
|
||||
.empty-file-list {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #e6f7ff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-actions .el-button {
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-actions .el-button:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
color: #f56c6c !important;
|
||||
}
|
||||
|
||||
.upload-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.headClass {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 10px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.headClass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: #409eff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user