增加投诉举报、装备管理页面
This commit is contained in:
luolianxin
parent
3c10d50f5c
commit
51301acb17
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div class="complaint-report-board">
|
||||
<iframe
|
||||
class="complaint-report-board__iframe"
|
||||
src="https://xa-screen-pro.12350.work/"
|
||||
title="投诉举报看板"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.complaint-report-board {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.complaint-report-board__iframe {
|
||||
flex: 1;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div class="complaint-system-login">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>投诉系统登录</h1>
|
||||
<p class="description">正在为您跳转到投诉系统...</p>
|
||||
|
||||
<div class="button-group">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="handleSSO"
|
||||
:loading="isLoading"
|
||||
>
|
||||
{{ isLoading ? '正在跳转...' : '点击跳转到投诉系统' }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="large"
|
||||
@click="handleCancel"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="error-message">
|
||||
<el-alert
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
:closable="true"
|
||||
@close="errorMessage = ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { SignJWT } from 'jose';
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
// 投诉系统配置
|
||||
const COMPLAINT_SYSTEM_URL = 'https://auth.xa.12350.work/backend.auth/zhzf_login'
|
||||
const SSO_SECRET_KEY = import.meta.env.VITE_SSO_SECRET_KEY || 'default-secret-key-change-in-production'
|
||||
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const userStore = useUserStore()
|
||||
/**
|
||||
* 生成 SSO JWT 令牌
|
||||
*/
|
||||
async function generateSSOToken(userInfo) {
|
||||
try {
|
||||
// 将密钥转换为 Uint8Array
|
||||
const encoder = new TextEncoder();
|
||||
const secret = encoder.encode(SSO_SECRET_KEY);
|
||||
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
const token = await new SignJWT({
|
||||
userId: userInfo.userId,
|
||||
officerName: userInfo.officerName,
|
||||
officerMobilePhone: userInfo.officerMobilePhone
|
||||
})
|
||||
.setProtectedHeader({ alg: 'HS256' })
|
||||
.setIssuedAt(now)
|
||||
.setExpirationTime(now + 86400) // 24小时有效期
|
||||
.sign(secret);
|
||||
|
||||
return token;
|
||||
} catch (error) {
|
||||
console.error('生成 SSO 令牌失败:', error);
|
||||
throw new Error('生成 SSO 令牌失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成投诉系统的重定向 URL
|
||||
*/
|
||||
async function generateRedirectURL(userInfo) {
|
||||
try {
|
||||
const token = await generateSSOToken(userInfo);
|
||||
const redirectURL = `${COMPLAINT_SYSTEM_URL}?token=${encodeURIComponent(token)}`;
|
||||
return redirectURL;
|
||||
} catch (error) {
|
||||
console.error('生成重定向 URL 失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行 SSO 跳转
|
||||
*/
|
||||
async function handleSSO() {
|
||||
isLoading.value = true;
|
||||
errorMessage.value = '';
|
||||
|
||||
try {
|
||||
// 使用测试用户信息
|
||||
const testUserInfo = {
|
||||
userId: userStore.userInfo.yhwybs,
|
||||
officerName: userStore.username,
|
||||
officerMobilePhone: userStore.mobile,
|
||||
iat: Math.floor(Date.now() / 1000),
|
||||
exp: Math.floor(Date.now() / 1000) + 86400
|
||||
};
|
||||
|
||||
const redirectURL = await generateRedirectURL(testUserInfo);
|
||||
|
||||
console.log('生成的重定向 URL:', redirectURL);
|
||||
console.log('用户信息:', testUserInfo);
|
||||
|
||||
// 在当前窗口跳转到投诉系统（登录组件通常已在新窗口中打开）
|
||||
window.location.href = redirectURL;
|
||||
|
||||
ElMessage.success('已为您打开投诉系统，请等待加载。');
|
||||
} catch (error) {
|
||||
console.error('SSO 跳转失败:', error);
|
||||
errorMessage.value = error.message || '跳转失败，请稍后重试';
|
||||
ElMessage.error(errorMessage.value);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消操作
|
||||
*/
|
||||
function handleCancel() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
/**
|
||||
* 组件挂载时的初始化
|
||||
*/
|
||||
onMounted(() => {
|
||||
console.log('投诉系统登录挂载完成');
|
||||
handleSSO();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.complaint-system-login {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.el-button) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
<template>
|
||||
<browser :component-loading="componentLoading"
|
||||
:api-config="apiConfig"
|
||||
:permissions="permissions"
|
||||
:dialog-config="dialogConfig"
|
||||
:table-config="tableConfig"
|
||||
:actions="actions"
|
||||
@update:actions="actions = $event"
|
||||
@update:dialog-config="dialogConfig = $event">
|
||||
<template #queryPanel="{ queryParams: qp }">
|
||||
<el-form ref="queryForm" :model="qp" label-width="80px">
|
||||
<el-row class="query-condition">
|
||||
<el-col :span="6"><el-form-item label="所属机构"><AgencySelector v-model="qp.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="车牌号"><el-input v-model="qp.cph" clearable/></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="车辆类型"><el-select v-model="qp.cllxdm" placeholder="请选择" clearable><el-option v-for="item in DICTITEMS.ZFCLCLLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<el-table-column header-align="center" align="center" prop="sdmc" label="所属机构" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="cph" label="车牌号" min-width="200" show-overflow-tooltip/>
|
||||
<el-table-column header-align="center" align="center" prop="cllx" label="车辆类型" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="gzsj" label="购置时间" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="zsbzbh" label="制式标志编号" min-width="200"/>
|
||||
<template #dialogContent="{ dialogConfig: dc }">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属机构" prop="agency">
|
||||
<AgencySelector v-model="dc.data.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车牌号" prop="cph">
|
||||
<el-input v-model="dc.data.cph"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车辆类型" prop="cllxdm">
|
||||
<el-select v-model="dc.data.cllxdm" clearable>
|
||||
<el-option v-for="item in DICTITEMS.ZFCLCLLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="车辆编码" prop="clbm">
|
||||
<el-input v-model="dc.data.clbm"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="购置时间" prop="gzsj">
|
||||
<el-date-picker v-model="dc.data.gzsj" type="datetime" placeholder="选择购置时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="喷涂制式标志" prop="zsbz">
|
||||
<el-select v-model="dc.data.zsbz" clearable>
|
||||
<el-option v-for="item in DICTITEMS.SF_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="制式标志编号" prop="zsbzbh">
|
||||
<el-input v-model="dc.data.zsbzbh"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="经度" prop="longitude">
|
||||
<el-input v-model="dc.data.longitude"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="纬度" prop="latitude">
|
||||
<el-input v-model="dc.data.latitude"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label-width="95px" label="车辆照片">
|
||||
<MultiplePicture ref="multiple_pictures_zfclgl"
|
||||
:form-data="{urls: zhaopians}"
|
||||
:parameters="{mode: dc.mode, autoUpload: true, limit: 20}"
|
||||
@on-success="onSuccessZfclgl"
|
||||
@on-pic-view="onPicViewZfclgl"
|
||||
@on-remove="onRemoveZfclgl"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</browser>
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, toRefs, ref, watch, defineProps} from 'vue'
|
||||
import Browser from '@/components/Browser.vue'
|
||||
import {useUserStore} from '@/stores/modules/user'
|
||||
import { ElMessage } from "element-plus"
|
||||
import AgencySelector from "@/components/AgencySelector.vue"
|
||||
import { DICTITEMS } from "@/utils/Constants.js"
|
||||
import zfclgls from "@/api/lawenforcement/Zfclgl.js";
|
||||
import MultiplePicture from "@pages/common/MultiplePicture.vue"
|
||||
|
||||
const userStore = useUserStore()
|
||||
const props = defineProps({
|
||||
dc: {type: Object}
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
componentLoading: false,
|
||||
permissions: {
|
||||
query: true,
|
||||
add: true,
|
||||
modify: true,
|
||||
detail: true,
|
||||
delete: true,
|
||||
deleteAll: false,
|
||||
importFile: false,
|
||||
exportFile: false,
|
||||
exportSelectFile: false,
|
||||
downloadTemp: false,
|
||||
},
|
||||
apiConfig: {
|
||||
api: zfclgls,
|
||||
modelId: 'zfclglid',
|
||||
},
|
||||
tableConfig: {
|
||||
hasControlColumn: true,
|
||||
controlWidth: '180',
|
||||
multipleSelect: false
|
||||
},
|
||||
dialogConfig: {
|
||||
show: false,
|
||||
mode: 'detail',
|
||||
formLabelWidth: '110px',
|
||||
loading: false,
|
||||
baseTitle: '执法车辆管理',
|
||||
rules: {
|
||||
agency: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
|
||||
cph: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],
|
||||
cllxdm: [{ required: true, message: '车辆类型不能为空', trigger: 'blur' }],
|
||||
gzsj: [{ required: true, message: '购置时间不能为空', trigger: 'blur' }],
|
||||
zsbz: [{ required: true, message: '喷涂制式标志不能为空', trigger: 'blur' }]
|
||||
},
|
||||
data: {},
|
||||
actions: {
|
||||
handleDialogOk: handleDialogOk
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
add: handleAdd,
|
||||
modify: handleModify,
|
||||
detail: handleDetail,
|
||||
handleSelectionChange
|
||||
},
|
||||
simpleConfigCase: {confName: 'case'},
|
||||
simpleConfigZfws: {confName: 'document'},
|
||||
simpleConfigSdfs: {confName: 'recipient'},
|
||||
simpleConfigSsr: {confName: 'method'},
|
||||
deliverys: []
|
||||
})
|
||||
|
||||
const {
|
||||
componentLoading,
|
||||
permissions,
|
||||
tableConfig,
|
||||
apiConfig,
|
||||
dialogConfig,
|
||||
actions,
|
||||
simpleConfigCase,
|
||||
simpleConfigZfws,
|
||||
simpleConfigSdfs,
|
||||
simpleConfigSsr,
|
||||
deliverys
|
||||
} = toRefs(state)
|
||||
|
||||
const methodName = ref('')
|
||||
|
||||
// 响应是变量照片
|
||||
const zhaopians = ref([])
|
||||
|
||||
function handleAdd() {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'add'
|
||||
dialogConfig.value.title = '执法车辆管理新增'
|
||||
dialogConfig.value.data = Object.assign({}, {})
|
||||
dialogConfig.value.data.zfclglzps = [] // 车辆图片
|
||||
zhaopians.value = []
|
||||
}
|
||||
|
||||
function handleModify(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'modify'
|
||||
dialogConfig.value.title = '执法车辆管理修改'
|
||||
dialogConfig.value.data.documentIds = []
|
||||
if (row.zfclglzps && row.zfclglzps.length > 0) {
|
||||
row.zfclglzps.forEach(item => item.uid = item.zfclglzpid)
|
||||
}
|
||||
zhaopians.value = row.zfclglzps // 赋值照片
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
function handleDetail(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'detail'
|
||||
dialogConfig.value.title = '执法车辆管理详情'
|
||||
dialogConfig.value.showFooter = false
|
||||
if (row.zfclglzps && row.zfclglzps.length > 0) {
|
||||
row.zfclglzps.forEach(item => item.uid = item.zfclglzpid)
|
||||
}
|
||||
zhaopians.value = row.zfclglzps // 赋值照片
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
function findOne(row) {
|
||||
dialogConfig.value.loading = true
|
||||
apiConfig.value.api.findOne(row[apiConfig.value.modelId]).then(res => {
|
||||
if (res.success) {
|
||||
dialogConfig.value.loading = false
|
||||
let data = res.data
|
||||
methodName.value = data.deliveryMethod?.methodName
|
||||
data.documentIds = data.documentIds?.split(',') || []
|
||||
// if (res.data.zfclglzps && res.data.zfclglzps.length > 0) {
|
||||
// console.log('执行没')
|
||||
// res.data.zfclglzps.forEach(item => item.uid = item.zfclglzpid)
|
||||
// }
|
||||
dialogConfig.value.data = Object.assign({}, data)
|
||||
} else {
|
||||
dialogConfig.value.loading = false
|
||||
throw new Error('查询失败')
|
||||
}
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
function handleDialogOk(formRef) {
|
||||
let _event = actions.value
|
||||
formRef.validate(valid => {
|
||||
if (valid) {
|
||||
// dialogConfig.value.loading = true
|
||||
let data = Object.assign({}, dialogConfig.value.data)
|
||||
if (data.agency === null || data.agency === '') {
|
||||
ElMessage.error('所属机构不能为空！')
|
||||
}
|
||||
console.log('提交参数=', data)
|
||||
if (dialogConfig.value.mode === 'add') {
|
||||
apiConfig.value.api.add(data).then(res => {
|
||||
dialogConfig.value.show = false
|
||||
if (res.success) {
|
||||
ElMessage.success('操作成功')
|
||||
_event.query()
|
||||
} else {
|
||||
throw new Error('操作失败')
|
||||
}
|
||||
dialogConfig.value.loading = false
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
} else if (dialogConfig.value.mode === 'modify') {
|
||||
apiConfig.value.api.modify(dialogConfig.value.data[apiConfig.value.modelId], data).then(res => {
|
||||
dialogConfig.value.show = false
|
||||
if (res.success) {
|
||||
ElMessage.success('操作成功')
|
||||
_event.query()
|
||||
} else {
|
||||
throw new Error('操作失败')
|
||||
}
|
||||
dialogConfig.value.loading = false
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleSelectionChange(selectedData) {
|
||||
deliverys.value = [...selectedData]
|
||||
}
|
||||
|
||||
// 图片添加
|
||||
function onSuccessZfclgl(data, file, row) {
|
||||
let obj = {zfclglzpid: file.uid, name: data.fileName, savePath: data.savePathName, url: data.url}
|
||||
console.log('照片==', obj)
|
||||
dialogConfig.value.data.zfclglzps.push(obj)
|
||||
}
|
||||
|
||||
const pictureViewRef = ref(null)
|
||||
|
||||
function onPicViewZfclgl(url) {
|
||||
pictureViewRef.value.viewPicture(url)
|
||||
}
|
||||
function onRemoveZfclgl(file, row) {
|
||||
const idx = dialogConfig.value.data.zfclglzps.findIndex((item) => item.uid === file.uid)
|
||||
if (idx > -1) dialogConfig.value.data.zfclglzps.splice(idx, 1)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
<template>
|
||||
<browser :component-loading="componentLoading"
|
||||
:api-config="apiConfig"
|
||||
:permissions="permissions"
|
||||
:dialog-config="dialogConfig"
|
||||
:table-config="tableConfig"
|
||||
:actions="actions"
|
||||
@update:actions="actions = $event"
|
||||
@update:dialog-config="dialogConfig = $event">
|
||||
<template #queryPanel="{ queryParams: qp }">
|
||||
<el-form ref="queryForm" :model="qp" label-width="80px">
|
||||
<el-row class="query-condition">
|
||||
<el-col :span="6"><el-form-item label="属地"><AgencySelector v-model="qp.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="装备名称"><el-input v-model="qp.zbmc" clearable/></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="装备类型"><el-select v-model="qp.zblxdm" placeholder="请选择" clearable><el-option v-for="item in DICTITEMS.ZFZBZBLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<el-table-column header-align="center" align="center" prop="sdmc" label="属地" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="zbmc" label="装备名称" min-width="200" show-overflow-tooltip/>
|
||||
<el-table-column header-align="center" align="center" prop="zblx" label="装备类型" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="gzsj" label="购置时间" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="syr" label="使用人" min-width="200"/>
|
||||
<template #tableControlColumn="{ data: r }">
|
||||
<el-link v-if="r.data.row.zblxdm === '7' || r.data.row.zblxdm === '8'" type="primary" @click="lslx(r.data.row)" title="历史录像">历史录像</el-link>
|
||||
</template>
|
||||
<template #dialogContent="{ dialogConfig: dc }">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="属地" prop="agency">
|
||||
<AgencySelector v-model="dc.data.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="装备名称" prop="zbmc">
|
||||
<el-input v-model="dc.data.zbmc"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="装备编码" prop="sbbm">
|
||||
<el-input v-model="dc.data.sbbm"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="装备类型" prop="zblxdm">
|
||||
<el-select v-model="dc.data.zblxdm" clearable>
|
||||
<el-option v-for="item in DICTITEMS.ZFZBZBLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="购置时间" prop="gzsj">
|
||||
<el-date-picker v-model="dc.data.gzsj" type="datetime" placeholder="选择实际送达时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="使用人" prop="syr">
|
||||
<el-input v-model="dc.data.syr"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider v-show="dialogConfig.mode === 'lslx'" content-position="left">设备历史录像</el-divider>
|
||||
<el-row v-show="dialogConfig.mode === 'lslx'" class="width-100">
|
||||
<el-col :span="24" class="padding-bottom-10">
|
||||
<el-table :data="dialogConfig.data.videos" height="200" border>
|
||||
<el-table-column header-align="center" align="center" prop="zbmc" label="装备名称" min-width="150" show-overflow-tooltip/>
|
||||
<el-table-column header-align="center" align="center" prop="zbdm" label="装备代码" min-width="150"/>
|
||||
<el-table-column header-align="center" align="center" prop="zblxmc" label="装备类型名称" min-width="150"/>
|
||||
<el-table-column header-align="center" align="center" prop="cjsj" label="创建时间" min-width="150"/>
|
||||
<el-table-column fixed="right" label="操作" width="120" align="center">
|
||||
<template #default="{row}">
|
||||
<el-link type="primary" title="查看" @click="handCheckDetail(row)">查看</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</browser>
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, toRefs, ref, watch} from 'vue'
|
||||
import Browser from '@/components/Browser.vue'
|
||||
import {useUserStore} from '@/stores/modules/user'
|
||||
import {ElButton, ElMessage} from "element-plus"
|
||||
import AgencySelector from "@/components/AgencySelector.vue"
|
||||
import {DEFAULT_ENTERPRISE_DETAIL, DICTDISPLAYS, DICTITEMS} from "@/utils/Constants.js"
|
||||
import zfzbgls from "@/api/lawenforcement/Zfzbgl.js";
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const state = reactive({
|
||||
componentLoading: false,
|
||||
permissions: {
|
||||
query: true,
|
||||
add: true,
|
||||
modify: true,
|
||||
detail: true,
|
||||
delete: true,
|
||||
deleteAll: false,
|
||||
importFile: false,
|
||||
exportFile: false,
|
||||
exportSelectFile: false,
|
||||
downloadTemp: false,
|
||||
},
|
||||
apiConfig: {
|
||||
api: zfzbgls,
|
||||
modelId: 'zfzbglid',
|
||||
},
|
||||
tableConfig: {
|
||||
hasControlColumn: true,
|
||||
controlWidth: '180',
|
||||
multipleSelect: false
|
||||
},
|
||||
dialogConfig: {
|
||||
show: false,
|
||||
mode: 'detail',
|
||||
formLabelWidth: '110px',
|
||||
loading: false,
|
||||
baseTitle: '执法装备管理',
|
||||
rules: {
|
||||
agency: [{ required: true, message: '属地不能为空', trigger: 'blur' }],
|
||||
zbmc: [{ required: true, message: '装备名称不能为空', trigger: 'blur' }],
|
||||
zblxdm: [{ required: true, message: '装备类型不能为空', trigger: 'blur' }],
|
||||
gzsj: [{ required: true, message: '购置时间不能为空', trigger: 'blur' }],
|
||||
syr: [{ required: true, message: '使用人不能为空', trigger: 'blur' }]
|
||||
},
|
||||
data: {},
|
||||
actions: {
|
||||
handleDialogOk: handleDialogOk
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
add: handleAdd,
|
||||
modify: handleModify,
|
||||
detail: handleDetail,
|
||||
handleSelectionChange
|
||||
},
|
||||
simpleConfigCase: {confName: 'case'},
|
||||
simpleConfigZfws: {confName: 'document'},
|
||||
simpleConfigSdfs: {confName: 'recipient'},
|
||||
simpleConfigSsr: {confName: 'method'},
|
||||
deliverys: []
|
||||
})
|
||||
|
||||
const {
|
||||
componentLoading,
|
||||
permissions,
|
||||
tableConfig,
|
||||
apiConfig,
|
||||
dialogConfig,
|
||||
actions,
|
||||
simpleConfigCase,
|
||||
simpleConfigZfws,
|
||||
simpleConfigSdfs,
|
||||
simpleConfigSsr,
|
||||
deliverys
|
||||
} = toRefs(state)
|
||||
|
||||
const methodName = ref('')
|
||||
|
||||
|
||||
function handleAdd() {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'add'
|
||||
dialogConfig.value.title = '执法装备管理新增'
|
||||
dialogConfig.value.data = Object.assign({}, {})
|
||||
}
|
||||
|
||||
function handleModify(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'modify'
|
||||
dialogConfig.value.title = '执法装备管理修改'
|
||||
dialogConfig.value.data.documentIds = []
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
function handleDetail(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'detail'
|
||||
dialogConfig.value.title = '执法装备管理详情'
|
||||
dialogConfig.value.showFooter = false
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
function findOne(row) {
|
||||
dialogConfig.value.loading = true
|
||||
apiConfig.value.api.findOne(row[apiConfig.value.modelId]).then(res => {
|
||||
if (res.success) {
|
||||
dialogConfig.value.loading = false
|
||||
let data = res.data
|
||||
methodName.value = data.deliveryMethod?.methodName
|
||||
data.logistics = data.logistics? data.logistics:{}
|
||||
data.documentIds = data.documentIds?.split(',') || []
|
||||
if (data.materials) data.materials.forEach(item => item.uid = item.materialsId)
|
||||
dialogConfig.value.data = Object.assign({}, data, {picList: data.materials})
|
||||
} else {
|
||||
dialogConfig.value.loading = false
|
||||
throw new Error('查询失败')
|
||||
}
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
function handleDialogOk(formRef) {
|
||||
let _event = actions.value
|
||||
formRef.validate(valid => {
|
||||
if (valid) {
|
||||
dialogConfig.value.loading = true
|
||||
let data = Object.assign({}, dialogConfig.value.data)
|
||||
if (data.agency === null || data.agency === '') {
|
||||
ElMessage.error('属地不能为空！')
|
||||
}
|
||||
if (dialogConfig.value.mode === 'add') {
|
||||
console.log('参数=', data)
|
||||
apiConfig.value.api.add(data).then(res => {
|
||||
dialogConfig.value.show = false
|
||||
if (res.success) {
|
||||
ElMessage.success('操作成功')
|
||||
_event.query()
|
||||
} else {
|
||||
throw new Error('操作失败')
|
||||
}
|
||||
dialogConfig.value.loading = false
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
} else if (dialogConfig.value.mode === 'modify') {
|
||||
apiConfig.value.api.modify(dialogConfig.value.data[apiConfig.value.modelId], data).then(res => {
|
||||
dialogConfig.value.show = false
|
||||
if (res.success) {
|
||||
ElMessage.success('操作成功')
|
||||
_event.query()
|
||||
} else {
|
||||
throw new Error('操作失败')
|
||||
}
|
||||
dialogConfig.value.loading = false
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleSelectionChange(selectedData) {
|
||||
deliverys.value = [...selectedData]
|
||||
}
|
||||
|
||||
// 历史录像
|
||||
function lslx(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'lslx'
|
||||
dialogConfig.value.title = '历史录像'
|
||||
dialogConfig.value.showFooter = false
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
|
||||
// 视频查看
|
||||
function handCheckDetail(row) {
|
||||
dialogConfig1.value.show = true
|
||||
dialogConfig.value.loading = true
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<template>
|
||||
<browser :component-loading="componentLoading"
|
||||
:api-config="apiConfig"
|
||||
:permissions="permissions"
|
||||
:dialog-config="dialogConfig"
|
||||
:table-config="tableConfig"
|
||||
:actions="actions"
|
||||
@update:actions="actions = $event"
|
||||
@update:dialog-config="dialogConfig = $event">
|
||||
<template #queryPanel="{ queryParams: qp }">
|
||||
<el-form ref="queryForm" :model="qp" label-width="80px">
|
||||
<el-row class="query-condition">
|
||||
<el-col :span="6"><el-form-item label="所属机构"><AgencySelector v-model="qp.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="姓名"><el-input v-model="qp.name" clearable/></el-form-item></el-col>
|
||||
<el-col :span="6"><el-form-item label="服装类型"><el-select v-model="qp.fzlxdm" placeholder="请选择" clearable><el-option v-for="item in DICTITEMS.ZSFZFZLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<el-table-column header-align="center" align="center" prop="sdmc" label="所属机构" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="name" label="姓名" min-width="200" show-overflow-tooltip/>
|
||||
<el-table-column header-align="center" align="center" prop="fzlx" label="服装类型" min-width="200"/>
|
||||
<el-table-column header-align="center" align="center" prop="gzsj" label="配发时间" min-width="200"/>
|
||||
<template #dialogContent="{ dialogConfig: dc }">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属机构" prop="agency">
|
||||
<AgencySelector v-model="dc.data.agency" :lazy-load="true" :multiple="false" placeholder="请选择"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="dc.data.name"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="服装类型" prop="fzlx">
|
||||
<el-select v-model="dc.data.fzlxdm" clearable>
|
||||
<el-option v-for="item in DICTITEMS.ZSFZFZLX_OPTIONS" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="服装编码" prop="fzbm">
|
||||
<el-input v-model="dc.data.fzbm"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="配发时间" prop="gzsj">
|
||||
<el-date-picker v-model="dc.data.gzsj" type="datetime" placeholder="选择实际送达时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</browser>
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, toRefs, ref, watch} from 'vue'
|
||||
import Browser from '@/components/Browser.vue'
|
||||
import {useUserStore} from '@/stores/modules/user'
|
||||
import {ElButton, ElMessage} from "element-plus"
|
||||
import AgencySelector from "@/components/AgencySelector.vue"
|
||||
import {DEFAULT_ENTERPRISE_DETAIL, DICTDISPLAYS, DICTITEMS} from "@/utils/Constants.js"
|
||||
import ssfzgl from "@/api/lawenforcement/Zsfzgl";
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const state = reactive({
|
||||
componentLoading: false,
|
||||
permissions: {
|
||||
query: true,
|
||||
add: true,
|
||||
modify: true,
|
||||
detail: true,
|
||||
delete: true,
|
||||
deleteAll: false,
|
||||
importFile: false,
|
||||
exportFile: false,
|
||||
exportSelectFile: false,
|
||||
downloadTemp: false,
|
||||
},
|
||||
apiConfig: {
|
||||
api: ssfzgl,
|
||||
modelId: 'zsfzglid',
|
||||
},
|
||||
tableConfig: {
|
||||
hasControlColumn: true,
|
||||
controlWidth: '180',
|
||||
multipleSelect: false
|
||||
},
|
||||
dialogConfig: {
|
||||
show: false,
|
||||
mode: 'detail',
|
||||
formLabelWidth: '110px',
|
||||
loading: false,
|
||||
baseTitle: '执法车辆管理',
|
||||
rules: {
|
||||
agency: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
|
||||
fzlxdm: [{ required: true, message: '服装类型不能为空', trigger: 'blur' }],
|
||||
gzsj: [{ required: true, message: '配发时间不能为空', trigger: 'blur' }]
|
||||
},
|
||||
data: {},
|
||||
actions: {
|
||||
handleDialogOk: handleDialogOk
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
add: handleAdd,
|
||||
modify: handleModify,
|
||||
detail: handleDetail,
|
||||
handleSelectionChange
|
||||
},
|
||||
simpleConfigCase: {confName: 'case'},
|
||||
simpleConfigZfws: {confName: 'document'},
|
||||
simpleConfigSdfs: {confName: 'recipient'},
|
||||
simpleConfigSsr: {confName: 'method'},
|
||||
deliverys: []
|
||||
})
|
||||
|
||||
const {
|
||||
componentLoading,
|
||||
permissions,
|
||||
tableConfig,
|
||||
apiConfig,
|
||||
dialogConfig,
|
||||
actions,
|
||||
simpleConfigCase,
|
||||
simpleConfigZfws,
|
||||
simpleConfigSdfs,
|
||||
simpleConfigSsr,
|
||||
deliverys
|
||||
} = toRefs(state)
|
||||
|
||||
const methodName = ref('')
|
||||
|
||||
|
||||
function handleAdd() {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'add'
|
||||
dialogConfig.value.title = '制式服装新增'
|
||||
dialogConfig.value.data = Object.assign({}, {})
|
||||
}
|
||||
|
||||
function handleModify(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'modify'
|
||||
dialogConfig.value.title = '制式服装修改'
|
||||
dialogConfig.value.data.documentIds = []
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
function handleDetail(row) {
|
||||
dialogConfig.value.show = true
|
||||
methodName.value = null
|
||||
dialogConfig.value.mode = 'detail'
|
||||
dialogConfig.value.title = '制式服装详情'
|
||||
dialogConfig.value.showFooter = false
|
||||
findOne(row)
|
||||
}
|
||||
|
||||
function findOne(row) {
|
||||
dialogConfig.value.loading = true
|
||||
apiConfig.value.api.findOne(row[apiConfig.value.modelId]).then(res => {
|
||||
if (res.success) {
|
||||
dialogConfig.value.loading = false
|
||||
let data = res.data
|
||||
methodName.value = data.deliveryMethod?.methodName
|
||||
data.logistics = data.logistics? data.logistics:{}
|
||||
data.documentIds = data.documentIds?.split(',') || []
|
||||
if (data.materials) data.materials.forEach(item => item.uid = item.materialsId)
|
||||
dialogConfig.value.data = Object.assign({}, data, {picList: data.materials})
|
||||
} else {
|
||||
dialogConfig.value.loading = false
|
||||
throw new Error('查询失败')
|
||||
}
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
function handleDialogOk(formRef) {
|
||||
let _event = actions.value
|
||||
formRef.validate(valid => {
|
||||
if (valid) {
|
||||
dialogConfig.value.loading = true
|
||||
let data = Object.assign({}, dialogConfig.value.data)
|
||||
if (data.agency === null || data.agency === '') {
|
||||
ElMessage.error('所属机构不能为空！')
|
||||
}
|
||||
if (dialogConfig.value.mode === 'add') {
|
||||
apiConfig.value.api.add(data).then(res => {
|
||||
dialogConfig.value.show = false
|
||||
if (res.success) {
|
||||
ElMessage.success('操作成功')
|
||||
_event.query()
|
||||
} else {
|
||||
throw new Error('操作失败')
|
||||
}
|
||||
dialogConfig.value.loading = false
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
} else if (dialogConfig.value.mode === 'modify') {
|
||||
apiConfig.value.api.modify(dialogConfig.value.data[apiConfig.value.modelId], data).then(res => {
|
||||
dialogConfig.value.show = false
|
||||
if (res.success) {
|
||||
ElMessage.success('操作成功')
|
||||
_event.query()
|
||||
} else {
|
||||
throw new Error('操作失败')
|
||||
}
|
||||
dialogConfig.value.loading = false
|
||||
}).catch(() => {
|
||||
dialogConfig.value.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleSelectionChange(selectedData) {
|
||||
deliverys.value = [...selectedData]
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue