提交代码
This commit is contained in:
13
src/views/SentrySystem/index.vue
Normal file
13
src/views/SentrySystem/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>灵芝岗哨</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="场所信息" name="basic">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所联系电话">
|
||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经营状况">
|
||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所面积">
|
||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开业日期">
|
||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所地址">
|
||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人">
|
||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人证件号码">
|
||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人联系电话">
|
||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人居住地址">
|
||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人身份证号">
|
||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人联系方式">
|
||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人居住地址">
|
||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机修场所备案编号">
|
||||
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所备案机构名称">
|
||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备案登记日期">
|
||||
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="责任民警">
|
||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('3D打印业场所管理详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
250
src/views/backOfficeSystem/3DPrinting/CSGL/index.vue
Normal file
250
src/views/backOfficeSystem/3DPrinting/CSGL/index.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="3D打印业场所管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button type="primary" link @click="addEdit('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "场所名称",
|
||||
prop: "placeName",
|
||||
placeholder: "场所名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "场所电话",
|
||||
prop: "placePhone",
|
||||
placeholder: "场所电话",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "法人姓名",
|
||||
prop: "legalPersonName",
|
||||
placeholder: "法人姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "法人证件号码",
|
||||
prop: "zjhm",
|
||||
placeholder: "法人证件号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "法人联系电话",
|
||||
prop: "lxdh",
|
||||
placeholder: "法人联系电话",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "经营状况",
|
||||
prop: "jyzk",
|
||||
placeholder: "经营状况",
|
||||
showType: "input"
|
||||
},
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
placeName: "老王打印店",
|
||||
placePhone: "13800138000",
|
||||
legalPersonName: "张三",
|
||||
legalPersonId: "511222222222222",
|
||||
legalPersonPhone: "13900139000",
|
||||
operationStatus: "在营",
|
||||
jurisdiction: "巴宜区纺织路派出所"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
placeName: "老王打印店",
|
||||
placePhone: "13800138000",
|
||||
legalPersonName: "张三",
|
||||
legalPersonId: "511222222222222",
|
||||
legalPersonPhone: "13900139000",
|
||||
operationStatus: "在营",
|
||||
jurisdiction: "巴宜区纺织路派出所"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
placeName: "老王打印店",
|
||||
placePhone: "13800138000",
|
||||
legalPersonName: "张三",
|
||||
legalPersonId: "511222222222222",
|
||||
legalPersonPhone: "13900139000",
|
||||
operationStatus: "在营",
|
||||
jurisdiction: "巴宜区纺织路派出所"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
placeName: "老王打印店",
|
||||
placePhone: "13800138000",
|
||||
legalPersonName: "张三",
|
||||
legalPersonId: "511222222222222",
|
||||
legalPersonPhone: "13900139000",
|
||||
operationStatus: "在营",
|
||||
jurisdiction: "巴宜区纺织路派出所"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
placeName: "老王打印店",
|
||||
placePhone: "13800138000",
|
||||
legalPersonName: "张三",
|
||||
legalPersonId: "511222222222222",
|
||||
legalPersonPhone: "13900139000",
|
||||
operationStatus: "在营",
|
||||
jurisdiction: "巴宜区纺织路派出所"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "经营状态", prop: "operationStatus" },
|
||||
{ label: "所属辖区", prop: "jurisdiction" },
|
||||
{ label: "法人姓名", prop: "legalPersonName" },
|
||||
{ label: "法人证件号码", prop: "legalPersonId" },
|
||||
{ label: "场所电话", prop: "placePhone" },
|
||||
{ label: "法人联系电话", prop: "legalPersonPhone" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">3D打印业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="listQuery.dwmc" placeholder="老王打印店"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="老王打印店"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="3D打印设备品牌型号">
|
||||
<el-input v-model="listQuery.sbppxh" placeholder="sa5421321321"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="3D打印设备号码">
|
||||
<el-input v-model="listQuery.sbhm" placeholder="1002"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="3D打印设备数量">
|
||||
<el-input v-model="listQuery.sbsl" placeholder="5"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="3D打印材料名称">
|
||||
<el-input v-model="listQuery.clmc" placeholder="塑料"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请单位单位名称">
|
||||
<el-input v-model="listQuery.sqdwmc" placeholder="xxxxx单位"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
197
src/views/backOfficeSystem/3DPrinting/YWXXGL/index.vue
Normal file
197
src/views/backOfficeSystem/3DPrinting/YWXXGL/index.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="3D打印业务信息管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'placeName', placeholder: "场所名称", showType: "input" },
|
||||
{ label: "申请单位单位名称", prop: 'applyUnitName', placeholder: "申请单位单位名称", showType: "input" },
|
||||
{ label: "3D打印材料名称", prop: 'materialName', placeholder: "申请单位单位名称", showType: "input" },
|
||||
{ label: "所属辖区", prop: 'jurisdiction', placeholder: "分县局", showType: "cascader" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
placeName: '老王打印店',
|
||||
equipmentNo: '1002',
|
||||
equipmentModelNo: 'sa5421321321',
|
||||
materialName: '塑料',
|
||||
applyUnitName: 'xxxxx单位'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
placeName: '老王打印店',
|
||||
equipmentNo: '1002',
|
||||
equipmentModelNo: 'sa5421321321',
|
||||
materialName: '塑料',
|
||||
applyUnitName: 'xxxxx单位'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
placeName: '老王打印店',
|
||||
equipmentNo: '1002',
|
||||
equipmentModelNo: 'sa5421321321',
|
||||
materialName: '塑料',
|
||||
applyUnitName: 'xxxxx单位'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
placeName: '老王打印店',
|
||||
equipmentNo: '1002',
|
||||
equipmentModelNo: 'sa5421321321',
|
||||
materialName: '塑料',
|
||||
applyUnitName: 'xxxxx单位'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
placeName: '老王打印店',
|
||||
equipmentNo: '1002',
|
||||
equipmentModelNo: 'sa5421321321',
|
||||
materialName: '塑料',
|
||||
applyUnitName: 'xxxxx单位'
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "3D打印设备序号", prop: "equipmentNo" },
|
||||
{ label: "3D打印设备品牌型号", prop: "equipmentModelNo" },
|
||||
{ label: "3D打印材料名称", prop: "materialName" },
|
||||
{ label: "申请单位单位名称", prop: "applyUnitName" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">爆破事故登记{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="爆破事故登记业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发生时间">
|
||||
<el-date-picker v-model="listQuery.fssj" type="datetime" style="width:100%" placeholder="请选择发生时间"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="民用爆炸物品发生环节">
|
||||
<el-input v-model="listQuery.mybzwpfshj" placeholder="请输入发生环节"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="事故发生地">
|
||||
<el-input v-model="listQuery.sgfsd" placeholder="请输入事故发生地"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="死亡人数">
|
||||
<el-input-number v-model="listQuery.swrs" :min="0" style="width:100%;" placeholder="请输入死亡人数"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="受伤人数">
|
||||
<el-input-number v-model="listQuery.ssrs" :min="0" style="width:100%;" placeholder="请输入受伤人数"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="损失价值（人民币万元）">
|
||||
<el-input-number v-model="listQuery.ssjz" :min="0" style="width:100%;" :precision="2" placeholder="请输入损失价值"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民用爆炸物品爆炸事故原因">
|
||||
<el-input v-model="listQuery.mybzwpbzsgyy" placeholder="请输入事故原因"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="民用爆炸物品爆炸事故发生区域">
|
||||
<el-input v-model="listQuery.mybzwpbzsgfsqy" placeholder="请输入事故发生区域"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民用爆炸物品爆炸事故性质">
|
||||
<el-input v-model="listQuery.mybzwpbzsgxz" placeholder="请输入事故性质"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="请输入登记人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记单位名称">
|
||||
<el-input v-model="listQuery.djdwmc" placeholder="请输入登记单位名称"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="发生场所部位详细情况">
|
||||
<el-input type="textarea" v-model="listQuery.fscsxq" :rows="3" placeholder="请输入详细情况"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="爆破事故登记信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button >
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "爆破事故登记业务流水号",
|
||||
prop: "flowNumber",
|
||||
placeholder: "请输入业务流水号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "事故发生区域",
|
||||
prop: "accidentArea",
|
||||
placeholder: "请输入事故发生区域",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "发生时间",
|
||||
prop: "accidentTime",
|
||||
placeholder: "请选择发生时间",
|
||||
showType: "date"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
flowNumber: "123456789",
|
||||
accidentTime: "2025/1/20",
|
||||
accidentLocation: "林芝市巴宜区xxx街道",
|
||||
accidentArea: "林芝市巴宜区",
|
||||
registrationUnit: "xxxxx单位"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "爆破事故登记业务流水号", prop: "flowNumber" },
|
||||
{ label: "发生时间", prop: "accidentTime" },
|
||||
{ label: "事故发生地", prop: "accidentLocation" },
|
||||
{ label: "事故发生区域", prop: "accidentArea" },
|
||||
{ label: "登记单位", prop: "registrationUnit" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">爆破作业项目信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="爆破作业项目业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.xzqh" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="项目名称">
|
||||
<el-input v-model="listQuery.xmmc" placeholder="请输入项目名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目级别">
|
||||
<el-input v-model="listQuery.xmjb" placeholder="请输入项目级别"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="委托单位名称">
|
||||
<el-input v-model="listQuery.wtdwmc" placeholder="请输入委托单位名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="作业开始时间">
|
||||
<el-date-picker v-model="listQuery.zyksrq" type="datetime" style="width:100%" placeholder="请选择作业开始时间"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="作业结束时间">
|
||||
<el-date-picker v-model="listQuery.zyjsrq" type="datetime" style="width:100%" placeholder="请选择作业结束时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设计施工单位">
|
||||
<el-input v-model="listQuery.sjsgdw" placeholder="请输入设计施工单位"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="安全评估单位">
|
||||
<el-input v-model="listQuery.aqpgdw" placeholder="请输入安全评估单位"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安全监理单位">
|
||||
<el-input v-model="listQuery.aqjldw" placeholder="请输入安全监理单位"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="爆破作业项目信息"></PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button type="primary" link @click="addEdit('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "爆破作业项目业务流水号",
|
||||
prop: "flowNumber",
|
||||
placeholder: "请输入业务流水号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "administrativeArea",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "项目名称",
|
||||
prop: "projectName",
|
||||
placeholder: "请输入项目名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
flowNumber: "123456789",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
projectName: "山体爆破",
|
||||
startDate: "2025/1/20",
|
||||
endDate: "2025/1/25"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
flowNumber: "123456789",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
projectName: "山体爆破",
|
||||
startDate: "2025/1/20",
|
||||
endDate: "2025/1/25"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
flowNumber: "123456789",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
projectName: "山体爆破",
|
||||
startDate: "2025/1/20",
|
||||
endDate: "2025/1/25"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
flowNumber: "123456789",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
projectName: "山体爆破",
|
||||
startDate: "2025/1/20",
|
||||
endDate: "2025/1/25"
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
flowNumber: "123456789",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
projectName: "山体爆破",
|
||||
startDate: "2025/1/20",
|
||||
endDate: "2025/1/25"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "爆破作业项目业务流水号", prop: "flowNumber" },
|
||||
{ label: "行政区划", prop: "administrativeArea" },
|
||||
{ label: "项目名称", prop: "projectName" },
|
||||
{ label: "作业开始时间", prop: "startDate" },
|
||||
{ label: "作业结束时间", prop: "endDate" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">爆炸事故单位信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.xzqh" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="事故业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入事故业务流水号码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记日期">
|
||||
<el-date-picker v-model="listQuery.djrq" type="date" style="width:100%" placeholder="请选择登记日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位编号_顺序号">
|
||||
<el-input v-model="listQuery.dwbh" placeholder="请输入单位编号_顺序号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位地址">
|
||||
<el-input v-model="listQuery.dwdz" placeholder="请输入单位地址"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="处理详细情况" label-width="230">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.clxxqk"
|
||||
:rows="4"
|
||||
placeholder="请输入处理详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="爆炸事故单位信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button >
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "administrativeArea",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记日期",
|
||||
prop: "registrationDate",
|
||||
placeholder: "请选择登记日期",
|
||||
showType: "date"
|
||||
},
|
||||
{
|
||||
label: "单位名称",
|
||||
prop: "unitName",
|
||||
placeholder: "请输入单位名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
unitName: "xxxx单位",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
unitAddress: "林芝市巴宜区xxx街18号"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
unitName: "xxxx单位",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
unitAddress: "林芝市巴宜区xxx街18号"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
unitName: "xxxx单位",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
unitAddress: "林芝市巴宜区xxx街18号"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
unitName: "xxxx单位",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
unitAddress: "林芝市巴宜区xxx街18号"
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
unitName: "xxxx单位",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
unitAddress: "林芝市巴宜区xxx街18号"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "单位名称", prop: "unitName" },
|
||||
{ label: "行政区划", prop: "administrativeArea" },
|
||||
{ label: "登记日期", prop: "registrationDate" },
|
||||
{ label: "单位地址", prop: "unitAddress" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">图片详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="图片基本信息" name="first">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="图片名称">
|
||||
<el-input v-model="listQuery.imageName" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片类型">
|
||||
<el-input v-model="listQuery.imageType" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="上传时间">
|
||||
<el-input v-model="listQuery.uploadTime" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="文件大小">
|
||||
<el-input v-model="listQuery.fileSize" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="图片分辨率">
|
||||
<el-input v-model="listQuery.resolution" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片格式">
|
||||
<el-input v-model="listQuery.format" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="拍摄设备">
|
||||
<el-input v-model="listQuery.device" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="拍摄时间">
|
||||
<el-input v-model="listQuery.shootTime" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="拍摄地点">
|
||||
<el-input v-model="listQuery.location" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片标签">
|
||||
<el-input v-model="listQuery.tags" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="图片描述" :label-width="460">
|
||||
<el-input type="textarea" v-model="listQuery.description" disabled rows="3"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="图片预览" :label-width="460">
|
||||
<div class="image-preview">
|
||||
<img :src="listQuery.imageUrl" alt="图片预览" v-if="listQuery.imageUrl"/>
|
||||
<div class="no-image" v-else>暂无图片</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图片处理记录" name="second">图片处理记录</el-tab-pane>
|
||||
<el-tab-pane label="使用历史" name="third">使用历史</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const activeName = ref('first');
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
border: 1px solid #E3E7ED;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 500px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.no-image {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="涉爆从业单位管理"></PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button type="primary" link @click="addEdit('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "单位名称",
|
||||
prop: "unitName",
|
||||
placeholder: "请输入单位名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "单位类型",
|
||||
prop: "unitType",
|
||||
placeholder: "请选择单位类型",
|
||||
showType: "select",
|
||||
options: [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "类型1", value: "1" },
|
||||
{ label: "类型2", value: "2" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "法人姓名",
|
||||
prop: "legalPerson",
|
||||
placeholder: "请输入法人姓名",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
unitName: "xxx涉爆单位",
|
||||
unitType: "xxxx",
|
||||
legalPerson: "李四",
|
||||
startDate: "2025/1/20",
|
||||
endDate: "2029/1/21"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "序号", prop: "index", width: 60 },
|
||||
{ label: "单位名称", prop: "unitName" },
|
||||
{ label: "单位类型", prop: "unitType" },
|
||||
{ label: "法人姓名", prop: "legalPerson" },
|
||||
{ label: "有效起始日期", prop: "startDate" },
|
||||
{ label: "有效截至日期", prop: "endDate" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">涉爆违章项目信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.xzqh" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshxydm" placeholder="请输入统一社会信用代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记日期">
|
||||
<el-date-picker v-model="listQuery.djrq" type="date" style="width:100%" placeholder="请选择登记日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顺序号">
|
||||
<el-input v-model="listQuery.sxh" placeholder="请输入顺序号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="主要内容顺序号">
|
||||
<el-input v-model="listQuery.zynrsxh" placeholder="请输入主要内容顺序号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="违章登记日期">
|
||||
<el-date-picker v-model="listQuery.wzdjrq" type="date" style="width:100%" placeholder="请选择违章登记日期"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
199
src/views/backOfficeSystem/CivilExplosives/Illegal/index.vue
Normal file
199
src/views/backOfficeSystem/CivilExplosives/Illegal/index.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="涉爆违章项目信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button >
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "administrativeArea",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记日期",
|
||||
prop: "registrationDate",
|
||||
placeholder: "请选择登记日期",
|
||||
showType: "date"
|
||||
},
|
||||
{
|
||||
label: "违章登记日期",
|
||||
prop: "illegalRegistrationDate",
|
||||
placeholder: "请选择违章登记日期",
|
||||
showType: "date"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
serialNumber: 1,
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
illegalRegistrationDate: "2025/1/19"
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "统一社会信用代码", prop: "socialCreditCode" },
|
||||
{ label: "行政区划", prop: "administrativeArea" },
|
||||
{ label: "登记日期", prop: "registrationDate" },
|
||||
{ label: "违章登记日期", prop: "illegalRegistrationDate" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">涉爆重点人员{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.xzqh" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="别名">
|
||||
<el-input v-model="listQuery.bm" placeholder="请输入别名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="listQuery.xb" placeholder="请选择性别" style="width:100%">
|
||||
<el-option label="男" value="男"/>
|
||||
<el-option label="女" value="女"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="出生日期">
|
||||
<el-date-picker v-model="listQuery.csrq" type="date" style="width:100%" placeholder="请选择出生日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族">
|
||||
<el-input v-model="listQuery.mz" placeholder="请输入民族"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="文化程度">
|
||||
<el-input v-model="listQuery.whcd" placeholder="请输入文化程度"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="职业">
|
||||
<el-input v-model="listQuery.zy" placeholder="请输入职业"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="身份证号">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入身份证号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="户籍地址">
|
||||
<el-input v-model="listQuery.hjdz" placeholder="请输入户籍地址"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="居住地址">
|
||||
<el-input v-model="listQuery.jzdz" placeholder="请输入居住地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身高">
|
||||
<el-input v-model="listQuery.sg" placeholder="请输入身高"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="口音">
|
||||
<el-input v-model="listQuery.ky" placeholder="请输入口音"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话">
|
||||
<el-input v-model="listQuery.yddh" placeholder="请输入移动电话"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="重点人员体貌特征">
|
||||
<el-input v-model="listQuery.zdrytz" placeholder="请输入体貌特征"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="列管依据_详细情况">
|
||||
<el-input v-model="listQuery.lgyj" placeholder="请输入列管依据"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="列管日期">
|
||||
<el-date-picker v-model="listQuery.lgrq" type="date" style="width:100%" placeholder="请选择列管日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="填报人姓名">
|
||||
<el-input v-model="listQuery.tbrxm" placeholder="请输入填报人姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="填报日期">
|
||||
<el-date-picker v-model="listQuery.tbrq" type="date" style="width:100%" placeholder="请选择填报日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="填报单位名称">
|
||||
<el-input v-model="listQuery.tbdwmc" placeholder="请输入填报单位名称"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备注">
|
||||
<el-input type="textarea" v-model="listQuery.bz" :rows="3" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="照片">
|
||||
<div class="image-group">
|
||||
<div v-for="(url, index) in listQuery.photos" :key="index" class="image-item">
|
||||
<el-image :src="url" fit="cover"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="涉爆重点人员">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
>
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
link
|
||||
@click="addEdit('edit', row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
link
|
||||
@click="addEdit('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "人员姓名",
|
||||
prop: "name",
|
||||
placeholder: "请输入人员姓名",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "area",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "单位名称",
|
||||
prop: "unit",
|
||||
placeholder: "请输入单位名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
name: "王五",
|
||||
area: "林芝市巴宜区xxx派出所",
|
||||
unit: "xxxx涉爆单位",
|
||||
listingDate: "2025/1/19",
|
||||
listingReason: "xxxxxxxx"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "name" },
|
||||
{ label: "行政区划", prop: "area" },
|
||||
{ label: "单位名称", prop: "unit" },
|
||||
{ label: "列管日期", prop: "listingDate" },
|
||||
{ label: "列管依据_详细情况", prop: "listingReason" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
// 删除
|
||||
const delDictItem = (id) => {
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">爆炸事故人员信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.xzqh" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="事故业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入事故业务流水号码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记日期">
|
||||
<el-date-picker v-model="listQuery.djrq" type="date" style="width:100%" placeholder="请选择登记日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员顺序号">
|
||||
<el-input v-model="listQuery.ryxh" placeholder="请输入人员顺序号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="listQuery.xb" placeholder="请选择性别" style="width:100%">
|
||||
<el-option label="男" value="男"/>
|
||||
<el-option label="女" value="女"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="年龄">
|
||||
<el-input-number v-model="listQuery.nl" :min="0" style="width:100%" placeholder="请输入年龄"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="公民身份证号码">
|
||||
<el-input v-model="listQuery.sfzh" placeholder="请输入公民身份证号码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="处理详细情况" label-width="230">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.clxxqk"
|
||||
:rows="4"
|
||||
placeholder="请输入处理详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="爆炸事故人员信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button >
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "administrativeArea",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记日期",
|
||||
prop: "registrationDate",
|
||||
placeholder: "请选择登记日期",
|
||||
showType: "date"
|
||||
},
|
||||
{
|
||||
label: "事故业务流水号码",
|
||||
prop: "accidentSerialNumber",
|
||||
placeholder: "请输入事故业务流水号码",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
name: "张三",
|
||||
accidentSerialNumber: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
name: "张三",
|
||||
accidentSerialNumber: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
name: "张三",
|
||||
accidentSerialNumber: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
name: "张三",
|
||||
accidentSerialNumber: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20"
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
name: "张三",
|
||||
accidentSerialNumber: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 80,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "name" },
|
||||
{ label: "事故业务流水号码", prop: "accidentSerialNumber" },
|
||||
{ label: "行政区划", prop: "administrativeArea" },
|
||||
{ label: "登记日期", prop: "registrationDate" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">停产停业信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="停产停业业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="请输入停产停业业务流水号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshxydm" placeholder="请输入统一社会信用代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="检查人姓名">
|
||||
<el-input v-model="listQuery.jcrxm" placeholder="请输入检查人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="填发人姓名">
|
||||
<el-input v-model="listQuery.tfrxm" placeholder="请输入填发人姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="批准人姓名">
|
||||
<el-input v-model="listQuery.pzrxm" placeholder="请输入批准人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="批准文件证件号码">
|
||||
<el-input v-model="listQuery.pzwjzjhm" placeholder="请输入批准文件证件号码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="被通知人姓名">
|
||||
<el-input v-model="listQuery.btzrxm" placeholder="请输入被通知人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="填发时间">
|
||||
<el-date-picker v-model="listQuery.tfsj" type="datetime" style="width:100%" placeholder="请选择填发时间"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="请输入登记人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记单位名称">
|
||||
<el-input v-model="listQuery.djdwmc" placeholder="请输入登记单位名称"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="受理行政区划单位名称">
|
||||
<el-input v-model="listQuery.slxzqhdwmc" placeholder="请输入受理行政区划单位名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="办案单位名称">
|
||||
<el-input v-model="listQuery.badwmc" placeholder="请输入办案单位名称"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="具体修正项目详细情况">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.jtxzxmxxqk"
|
||||
:rows="4"
|
||||
placeholder="请输入具体修正项目详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="执法依据详细情况">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.zfyjxxqk"
|
||||
:rows="4"
|
||||
placeholder="请输入执法依据详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="违法犯罪经历描述">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.wffzjlms"
|
||||
:rows="4"
|
||||
placeholder="请输入违法犯罪经历描述"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="停产停业信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" type="primary" link>详细</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "停产停业业务流水号",
|
||||
prop: "suspensionSerialNumber",
|
||||
placeholder: "请输入停产停业业务流水号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "办案单位",
|
||||
prop: "handlingUnit",
|
||||
placeholder: "请输入办案单位",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "填发时间",
|
||||
prop: "issueDate",
|
||||
placeholder: "请选择填发时间",
|
||||
showType: "date"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
suspensionSerialNumber: "123456789",
|
||||
administrativeUnit: "xxxx单位1",
|
||||
handlingUnit: "林芝市巴宜区xxx派出所",
|
||||
issueDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
suspensionSerialNumber: "123456789",
|
||||
administrativeUnit: "xxxx单位1",
|
||||
handlingUnit: "林芝市巴宜区xxx派出所",
|
||||
issueDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
suspensionSerialNumber: "123456789",
|
||||
administrativeUnit: "xxxx单位1",
|
||||
handlingUnit: "林芝市巴宜区xxx派出所",
|
||||
issueDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
suspensionSerialNumber: "123456789",
|
||||
administrativeUnit: "xxxx单位1",
|
||||
handlingUnit: "林芝市巴宜区xxx派出所",
|
||||
issueDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位"
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
suspensionSerialNumber: "123456789",
|
||||
administrativeUnit: "xxxx单位1",
|
||||
handlingUnit: "林芝市巴宜区xxx派出所",
|
||||
issueDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "停产停业业务流水号", prop: "suspensionSerialNumber" },
|
||||
{ label: "受理行政区划单位名称", prop: "administrativeUnit" },
|
||||
{ label: "办案单位名称", prop: "handlingUnit" },
|
||||
{ label: "填发时间", prop: "issueDate" },
|
||||
{ label: "登记单位名称", prop: "registrationUnit" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">违章人员信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.administrativeArea" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.socialCreditCode" placeholder="请输入统一社会信用代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记日期">
|
||||
<el-date-picker v-model="listQuery.registrationDate" type="date" style="width:100%" placeholder="请选择登记日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顺序号">
|
||||
<el-input v-model="listQuery.sequenceNumber" placeholder="请输入顺序号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="人员顺序号">
|
||||
<el-input v-model="listQuery.personSequenceNumber" placeholder="请输入人员顺序号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.name" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="listQuery.gender" placeholder="请选择性别" style="width:100%">
|
||||
<el-option label="男" value="男"/>
|
||||
<el-option label="女" value="女"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="年龄">
|
||||
<el-input-number v-model="listQuery.age" :min="0" style="width:100%" placeholder="请输入年龄"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="身份证号码">
|
||||
<el-input v-model="listQuery.idNumber" placeholder="请输入身份证号码"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="listQuery.phoneNumber" placeholder="请输入联系电话"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="批准人姓名">
|
||||
<el-input v-model="listQuery.approverName" placeholder="请输入批准人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经办人姓名">
|
||||
<el-input v-model="listQuery.handlerName" placeholder="请输入经办人姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="违章详细情况">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.violationDetails"
|
||||
:rows="4"
|
||||
placeholder="请输入违章详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="处理详细情况">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.processingDetails"
|
||||
:rows="4"
|
||||
placeholder="请输入处理详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="违章人员信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" type="primary" link>详细</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "administrativeArea",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记单位",
|
||||
prop: "registrationUnit",
|
||||
placeholder: "请输入登记单位",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记时间",
|
||||
prop: "registrationDate",
|
||||
placeholder: "请选择登记时间",
|
||||
showType: "date"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
violatorName: "张三",
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位",
|
||||
handlerName: "王五"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "违章人姓名", prop: "violatorName" },
|
||||
{ label: "统一社会信用代码", prop: "socialCreditCode" },
|
||||
{ label: "行政区划", prop: "administrativeArea" },
|
||||
{ label: "登记日期", prop: "registrationDate" },
|
||||
{ label: "登记单位名称", prop: "registrationUnit" },
|
||||
{ label: "经办人姓名", prop: "handlerName" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">违章登记信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.administrativeArea" placeholder="请输入行政区划"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.socialCreditCode" placeholder="请输入统一社会信用代码"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记日期">
|
||||
<el-date-picker v-model="listQuery.registrationDate" type="date" style="width:100%" placeholder="请选择登记日期"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="顺序号">
|
||||
<el-input v-model="listQuery.sequenceNumber" placeholder="请输入顺序号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="违章人数">
|
||||
<el-input-number v-model="listQuery.violatorCount" :min="0" style="width:100%;" placeholder="请输入违章人数"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.registrantName" placeholder="请输入登记人姓名"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记单位">
|
||||
<el-input v-model="listQuery.registrationUnit" placeholder="请输入登记单位"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="违章详细情况">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.violationDetails"
|
||||
:rows="4"
|
||||
placeholder="请输入违章详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="处理详细情况">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="listQuery.processingDetails"
|
||||
:rows="4"
|
||||
placeholder="请输入处理详细情况"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const title = ref('');
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
title.value = type === 'edit' ? '编辑' : '详情';
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
title.value = '新增';
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="违章登记信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" type="primary" link>详细</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "行政区划",
|
||||
prop: "administrativeArea",
|
||||
placeholder: "请输入行政区划",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记单位",
|
||||
prop: "registrationUnit",
|
||||
placeholder: "请输入登记单位",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "登记时间",
|
||||
prop: "registrationDate",
|
||||
placeholder: "请选择登记时间",
|
||||
showType: "date"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
violatorCount: 3,
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位",
|
||||
registrantName: "王五"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
violatorCount: 3,
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位",
|
||||
registrantName: "王五"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
violatorCount: 3,
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位",
|
||||
registrantName: "王五"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
violatorCount: 3,
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位",
|
||||
registrantName: "王五"
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
violatorCount: 3,
|
||||
socialCreditCode: "5654465464",
|
||||
administrativeArea: "林芝市巴宜区xxx派出所",
|
||||
registrationDate: "2025/1/20",
|
||||
registrationUnit: "xxxxx单位",
|
||||
registrantName: "王五"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "违章人数", prop: "violatorCount" },
|
||||
{ label: "统一社会信用代码", prop: "socialCreditCode" },
|
||||
{ label: "行政区划", prop: "administrativeArea" },
|
||||
{ label: "登记日期", prop: "registrationDate" },
|
||||
{ label: "登记单位名称", prop: "registrationUnit" },
|
||||
{ label: "登记人姓名", prop: "registrantName" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList();
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName" @change="formData.keyCount++">
|
||||
<el-tab-pane label="库房使用详情" name="first">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房所属单位">
|
||||
<el-input v-model="listQuery.kfssdw" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房使用单位">
|
||||
<el-input v-model="listQuery.kfsydw" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库房使用单位代码">
|
||||
<el-input v-model="listQuery.kfsydwdm" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房编号">
|
||||
<el-input v-model="listQuery.kfdh" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库房名称">
|
||||
<el-input v-model="listQuery.kfmc" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房所在地">
|
||||
<el-input v-model="listQuery.kfszd" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库房地址">
|
||||
<el-input v-model="listQuery.kfdz" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="存储品种">
|
||||
<el-input v-model="listQuery.ccpz" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库房类型">
|
||||
<el-input v-model="listQuery.kflx" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房使用状态">
|
||||
<el-input v-model="listQuery.kfsyzt" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库房性质">
|
||||
<el-input v-model="listQuery.kfxz" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="租用开始时间">
|
||||
<el-input v-model="listQuery.zykssj" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="租用结束时间">
|
||||
<el-input v-model="listQuery.zyjssj" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row" style="color:#000"> <h1>库房入料信息</h1> </div>
|
||||
<MyTable
|
||||
:tableData="formData.tableData"
|
||||
:tableColumn="formData.tableColumn"
|
||||
:tableHeight="formData.tableHeight"
|
||||
:key="formData.keyCount"
|
||||
:tableConfiger="formData.tableConfiger"
|
||||
:controlsWidth="formData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
<div class="form-row" style="color:#000"> <h1>库房出料信息</h1> </div>
|
||||
<MyTable
|
||||
:tableData="formData.tableData2"
|
||||
:tableColumn="formData.tableColumn2"
|
||||
:tableHeight="formData.tableHeight"
|
||||
:key="formData.keyCount"
|
||||
:tableConfiger="formData.tableConfiger"
|
||||
:controlsWidth="formData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="库房详情" name="second">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row" style="color:#000"> <h1>库房基本信息</h1> </div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房名称">
|
||||
<el-input v-model="listQuery.kfmc" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属单位">
|
||||
<el-input v-model="listQuery.ssdw" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="库房序号">
|
||||
<el-input v-model="listQuery.kfxh" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库房类型">
|
||||
<el-input v-model="listQuery.kflx" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="所在库区">
|
||||
<el-input v-model="listQuery.kfxh" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库区所在地">
|
||||
<el-input v-model="listQuery.kflx" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="核定容量">
|
||||
<el-input v-model="listQuery.hdrl" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="存储品种">
|
||||
<el-input v-model="listQuery.ccpz" disabled/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-row" style="color:#000"> <h1>库房物品信息</h1> </div>
|
||||
<MyTable
|
||||
:tableData="formData.tableData3"
|
||||
:tableColumn="formData.tableColumn3"
|
||||
:tableHeight="formData.tableHeight"
|
||||
:key="formData.keyCount"
|
||||
:tableConfiger="formData.tableConfiger"
|
||||
:controlsWidth="formData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
|
||||
</el-form>
|
||||
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref ,reactive} from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
const activeName = ref('first');
|
||||
const formData = reactive({
|
||||
tableData: [
|
||||
{ index: 1, rksj: "2025/10/10 10:10:10", wpmc: "xxx", wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
|
||||
{ index: 2, rksj: "2025/10/10 10:10:10", wpmc: "xxx", wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
|
||||
],
|
||||
tableData2: [
|
||||
{ index: 1, rksj: "2025/10/10 10:10:10", wpmc: "xxx", wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
|
||||
{ index: 2, rksj: "2025/10/10 10:10:10", wpmc: "xxx", wplx: "雷管",wpbh:'1565',rksl:12 ,scrq:'2023/10/10 10:10:10',yxq:'2023/10/10 10:10:10'},
|
||||
],
|
||||
tableData3: [
|
||||
{ index: 1, wpmc: "xxx",wpdm:'1245',hdccl:'12',dldw:'' },
|
||||
],
|
||||
tableHeight: 300,
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
haveControls:null
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: "入库时间", prop: "rksj" },
|
||||
{ label: "物品名称", prop: "wpmc" },
|
||||
{ label: "物品类型", prop: "wplx" },
|
||||
{ label: "物品编号", prop: "wpbh" },
|
||||
{ label: "入库数量", prop: "rksl" },
|
||||
{ label: "生产日期", prop: "scrq" },
|
||||
{ label: "有效期", prop: "yxq" },
|
||||
],
|
||||
tableColumn2: [
|
||||
{ label: "出库时间", prop: "rksj" },
|
||||
{ label: "物品名称", prop: "wpmc" },
|
||||
{ label: "物品类型", prop: "wplx" },
|
||||
{ label: "物品编号", prop: "wpbh" },
|
||||
{ label: "入库数量", prop: "rksl" },
|
||||
{ label: "生产日期", prop: "scrq" },
|
||||
{ label: "有效期", prop: "yxq" },
|
||||
],
|
||||
tableColumn3: [
|
||||
{ label: "物品名称", prop: "wpmc" },
|
||||
{ label: "物品代码", prop: "wpdm" },
|
||||
{ label: "核定存储量", prop: "hdccl" },
|
||||
{ label: "度量单位", prop: "dldw" },
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
if (row) {
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
};
|
||||
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
::v-deep .el-table {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
border: 1px solid #E3E7ED;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 500px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.no-image {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
208
src/views/backOfficeSystem/CivilExplosives/Warehouse/index.vue
Normal file
208
src/views/backOfficeSystem/CivilExplosives/Warehouse/index.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle :title="['库房管理','库区管理']" v-model:active="active" @change="changeHead"></PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" type="primary" link @click="addEdit('edit', row)">库房使用信息</el-button>
|
||||
<el-button size="small" type="primary" link @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const queryFrom = ref({});
|
||||
const active = ref(0);
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "库房名称",
|
||||
prop: "kfmc",
|
||||
placeholder: "请输入库房名称",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "库房类型",
|
||||
prop: "kflx",
|
||||
placeholder: "请选择库房类型",
|
||||
showType: "select"
|
||||
},
|
||||
{
|
||||
label: "核定容量",
|
||||
prop: "hdrl",
|
||||
placeholder: "请输入核定容量",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
index: 1,
|
||||
kfmc: "xxxx单位",
|
||||
kflx: "",
|
||||
hdrl: "",
|
||||
},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 5,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 220,
|
||||
tableColumn: [
|
||||
{ label: "单位名称", prop: "kfmc" },
|
||||
{ label: "库房类型", prop: "kflx" },
|
||||
{ label: "核定容量", prop: "hdrl" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
const changeHead = (val) => {
|
||||
active.value = val;
|
||||
console.log(val,'============');
|
||||
pageData.keyCount++;
|
||||
switch (val) {
|
||||
case 0:
|
||||
searchConfiger.value = [
|
||||
{label: "库房名称",prop: "kfmc",placeholder: "请输入库房名称",showType: "input"},
|
||||
{ label: "库房类型", prop: "kflx", placeholder: "请选择库房类型", showType: "select" },
|
||||
{ label: "核定容量", prop: "hdrl", placeholder: "请输入核定容量", showType: "input" }
|
||||
]
|
||||
pageData.tableData = [{ index: 1, kfmc: "xxxx单位", kflx: "", hdrl: "", }]
|
||||
pageData.tableColumn = [
|
||||
{ label: "单位名称", prop: "kfmc" },
|
||||
{ label: "库房类型", prop: "kflx" },
|
||||
{ label: "核定容量", prop: "hdrl" },
|
||||
]
|
||||
break ;
|
||||
case 1:
|
||||
searchConfiger.value = [
|
||||
{label: "库区名称",prop: "kqmc",placeholder: "请输入库房名称",showType: "input"},
|
||||
{ label: "库类型", prop: "kqlx", placeholder: "请选择库房类型", showType: "select" },
|
||||
{ label: "是否在用", prop: "hdrl", placeholder: "请输入sfzy", showType: "input" }
|
||||
]
|
||||
pageData.tableData = [{ index: 1, kfmc: "xxxx单位", kqlx: "11", sfzy: "11", }]
|
||||
pageData.tableColumn = [
|
||||
{ label: "单区名称", prop: "kqmc" },
|
||||
{ label: "库区类型", prop: "kqlx" },
|
||||
{ label: "核定是否在用", prop: "sfzy" },
|
||||
]
|
||||
break ;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">智能采集设备信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="视频设备代码">
|
||||
<el-input v-model="listQuery.sbbh" placeholder="011022"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="listQuery.sbmc" placeholder="设备1"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="品牌型号">
|
||||
<el-input v-model="listQuery.ppxh" placeholder="xxxxxx"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址">
|
||||
<el-input v-model="listQuery.ip" placeholder="58.1265.5545.20"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="网络端口号">
|
||||
<el-input v-model="listQuery.wldkh" placeholder="100"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="行政区划">
|
||||
<el-input v-model="listQuery.xzqh" placeholder="巴宜区纺织路派出所"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="设备工作状态">
|
||||
<el-input v-model="listQuery.sbgzzt" placeholder="正常工作"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="经度">
|
||||
<el-input v-model="listQuery.jd" placeholder="101.3235165515"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度">
|
||||
<el-input v-model="listQuery.wd" placeholder="28.132132156"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
line-height: 30px;
|
||||
padding-left: 8px;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="智能采集设备信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('eidt', row)">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "场所名称", showType: "input" },
|
||||
{ label: "行政区划", prop: 'xzqh', placeholder: "行政区划", showType: "input" },
|
||||
{ label: "设备工作状态", prop: 'sbgzzt', placeholder: "设备工作状态", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name: '天上人间ktv', sbmc: '设备1', sbgzzt: '正常工作', xzqh: '巴宜区纺织路派出所', jd: '101.32351651515', wd: '28.132132156'},
|
||||
{name: '天上人间ktv', sbmc: '设备2', sbgzzt: '正常工作', xzqh: '巴宜区纺织路派出所', jd: '101.32351651515', wd: '28.132132156'},
|
||||
{name: '天上人间ktv', sbmc: '设备3', sbgzzt: '正常工作', xzqh: '巴宜区纺织路派出所', jd: '101.32351651515', wd: '28.132132156'},
|
||||
{name: '天上人间ktv', sbmc: '设备4', sbgzzt: '正常工作', xzqh: '巴宜区纺织路派出所', jd: '101.32351651515', wd: '28.132132156'},
|
||||
{name: '天上人间ktv', sbmc: '设备5', sbgzzt: '正常工作', xzqh: '巴宜区纺织路派出所', jd: '101.32351651515', wd: '28.132132156'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 200, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "设备工作状态", prop: "sbgzzt" },
|
||||
{ label: "行政区划", prop: "xzqh" },
|
||||
{ label: "经度", prop: "jd" },
|
||||
{ label: "纬度", prop: "wd" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
let url = '/mosty-lzcj/tbDwMbkf/delete';
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">机动车抓拍采集信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="视频设备代码">
|
||||
<el-input v-model="listQuery.videoDeviceCode" placeholder="011022"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<el-input v-model="listQuery.captureTime" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车号牌号码">
|
||||
<el-input v-model="listQuery.plateNumber" placeholder="藏C 123456"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车号牌颜色">
|
||||
<el-input v-model="listQuery.plateColor" placeholder="绿色"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车号牌种类">
|
||||
<el-input v-model="listQuery.plateType" placeholder="纯电动车"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车车身颜色">
|
||||
<el-input v-model="listQuery.vehicleColor" placeholder="黑色"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="抓拍图片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.captureImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车牌图片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
videoDeviceCode: '',
|
||||
captureTime: '',
|
||||
plateNumber: '',
|
||||
plateColor: '',
|
||||
plateType: '',
|
||||
vehicleColor: '',
|
||||
captureImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
],
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="机动车抓拍采集信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 抓拍图片 -->
|
||||
<template #captureImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.captureImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.captureImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "视频设备编号", prop: 'deviceNo', placeholder: "请输入视频设备编号", showType: "input" },
|
||||
{ label: "日期时间", prop: 'dateTime', placeholder: "请选择日期时间", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{deviceNo:'123456789', captureImage:'', licensePlateImage:'', dateTime:'2025/1/20 10:00:00', plateNumber:'藏G 123456', plateType:'绿牌电动车'},
|
||||
{deviceNo:'123456789', captureImage:'', licensePlateImage:'', dateTime:'2025/1/20 10:00:00', plateNumber:'藏G 123456', plateType:'绿牌电动车'},
|
||||
{deviceNo:'123456789', captureImage:'', licensePlateImage:'', dateTime:'2025/1/20 10:00:00', plateNumber:'藏G 123456', plateType:'绿牌电动车'},
|
||||
{deviceNo:'123456789', captureImage:'', licensePlateImage:'', dateTime:'2025/1/20 10:00:00', plateNumber:'藏G 123456', plateType:'绿牌电动车'},
|
||||
{deviceNo:'123456789', captureImage:'', licensePlateImage:'', dateTime:'2025/1/20 10:00:00', plateNumber:'藏G 123456', plateType:'绿牌电动车'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "序号", type: "index", width: 60 },
|
||||
{ label: "视频设备编号", prop: "deviceNo" },
|
||||
{ label: "抓拍图片", prop: "captureImage", slot: true },
|
||||
{ label: "车牌图片", prop: "licensePlateImage", slot: true },
|
||||
{ label: "日期时间", prop: "dateTime" },
|
||||
{ label: "机动车号牌", prop: "plateNumber" },
|
||||
{ label: "机动车号牌种类", prop: "plateType" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">从业人员涉及案事件信息</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="证件号码">
|
||||
<el-input v-model="listQuery.zjhm" placeholder="512412547865963541"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="案事件编号">
|
||||
<el-input v-model="listQuery.asjbh" placeholder="1234567"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="案事件发生时间">
|
||||
<el-input v-model="listQuery.ajfssj" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="案事件类别">
|
||||
<el-input v-model="listQuery.ajlb" placeholder="刑事案件"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="案事件处理结果">
|
||||
<el-input v-model="listQuery.ajclqk" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="简要案情">
|
||||
<el-input type="textarea" v-model="listQuery.jyaq" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="从业人员涉及案事件信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('eidt', row)">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'csmc', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "案件发生时间", prop: 'ajfssj', placeholder: "请选择案件发生时间", showType: "date" },
|
||||
{ label: "案件类别", prop: 'ajlb', placeholder: "请选择案件类别", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{csmc:'天上人间ktv', xm:'张三', ajlb:'刑事', ajfssj:'2022/1/20 10:00:00', ajclqk:'', jyaq:'xxxxxxxxxx'},
|
||||
{csmc:'天上人间ktv', xm:'张三', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'', jyaq:'xxxxxxxxxx'},
|
||||
{csmc:'天上人间ktv', xm:'张三', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'', jyaq:'xxxxxxxxxx'},
|
||||
{csmc:'天上人间ktv', xm:'张三', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'', jyaq:'xxxxxxxxxx'},
|
||||
{csmc:'天上人间ktv', xm:'张三', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'', jyaq:'xxxxxxxxxx'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 200, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "csmc" },
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "案件类别", prop: "ajlb" },
|
||||
{ label: "案事件发生时间", prop: "ajfssj" },
|
||||
{ label: "案事件处理结果", prop: "ajclqk" },
|
||||
{ label: "简要案情", prop: "jyaq" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
let url = '/mosty-lzcj/tbDwMbkf/delete';
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">公安机关日常检查信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="日常检查登记号">
|
||||
<el-input v-model="listQuery.rcjcdjh" placeholder="1"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="检查人姓名">
|
||||
<el-input v-model="listQuery.jcrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检查人警号">
|
||||
<el-input v-model="listQuery.jcrjh" placeholder="123456"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="公安机关机构代码">
|
||||
<el-input v-model="listQuery.gajgjgdm" placeholder="1234566"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检查部门">
|
||||
<el-input v-model="listQuery.jcbm" placeholder="巴宜区防范路演出所"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="场所检查简要情况">
|
||||
<el-input type="textarea" v-model="listQuery.csjcjyqk" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="检查结果简要情况">
|
||||
<el-input type="textarea" v-model="listQuery.jcjgjyqk" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="公安机关日常检查信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "场所名称", showType: "input" },
|
||||
{ label: "检查类型", prop: 'checkType', placeholder: "检查类型", showType: "input" },
|
||||
{ label: "检查日期", prop: 'checkDate', placeholder: "检查日期", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv',checkType:'日常检查',checkPerson:'张山',policeNo:'123456',checkDept:'巴宜区纺织路派出所',checkDate:'2025/1/20 10:00:00',manager:'李四'},
|
||||
{name:'天上人间ktv',checkType:'日常检查',checkPerson:'张山',policeNo:'123456',checkDept:'巴宜区纺织路派出所',checkDate:'2025/1/20 10:00:00',manager:'李四'},
|
||||
{name:'天上人间ktv',checkType:'日常检查',checkPerson:'张山',policeNo:'123456',checkDept:'巴宜区纺织路派出所',checkDate:'2025/1/20 10:00:00',manager:'李四'},
|
||||
{name:'天上人间ktv',checkType:'日常检查',checkPerson:'张山',policeNo:'123456',checkDept:'巴宜区纺织路派出所',checkDate:'2025/1/20 10:00:00',manager:'李四'},
|
||||
{name:'天上人间ktv',checkType:'日常检查',checkPerson:'张山',policeNo:'123456',checkDept:'巴宜区纺织路派出所',checkDate:'2025/1/20 10:00:00',manager:'李四'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "检查类型", prop: "checkType" },
|
||||
{ label: "检查人姓名", prop: "checkPerson" },
|
||||
{ label: "检查人警号", prop: "policeNo" },
|
||||
{ label: "检查部门", prop: "checkDept" },
|
||||
{ label: "检查日期", prop: "checkDate" },
|
||||
{ label: "场所负责人", prop: "manager" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">安全防范设备信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="安全防范设备类型">
|
||||
<el-input v-model="listQuery.aqffsblx" placeholder="灭火器"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="listQuery.sbmc" placeholder="干粉灭火器"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="设备序号">
|
||||
<el-input v-model="listQuery.sbxh" placeholder="1234566"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌型号">
|
||||
<el-input v-model="listQuery.ppxh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="厂商名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="xxxxxxx"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="安全防范设备数量">
|
||||
<el-input v-model="listQuery.sl" placeholder="100"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="检测机构名称" style="width:50%;">
|
||||
<el-input v-model="listQuery.jcjgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="安全防范设备信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "设备名称", prop: 'sbmc', placeholder: "请输入设备名称", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv', aqffsblx:'灭火器', sbmc:'干粉灭火器', cjsmc:'xxxxx', sl:100},
|
||||
{name:'天上人间ktv', aqffsblx:'灭火器', sbmc:'干粉灭火器', cjsmc:'xxxxx', sl:100},
|
||||
{name:'天上人间ktv', aqffsblx:'灭火器', sbmc:'干粉灭火器', cjsmc:'xxxxx', sl:100},
|
||||
{name:'天上人间ktv', aqffsblx:'灭火器', sbmc:'干粉灭火器', cjsmc:'xxxxx', sl:100},
|
||||
{name:'天上人间ktv', aqffsblx:'灭火器', sbmc:'干粉灭火器', cjsmc:'xxxxx', sl:100},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 120, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "安全防范设备类型", prop: "aqffsblx" },
|
||||
{ label: "设备名称", prop: "sbmc" },
|
||||
{ label: "厂商名称", prop: "cjsmc" },
|
||||
{ label: "品牌型号", prop: "ppxh" },
|
||||
{ label: "安全防范设备数量", prop: "sl" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="场所信息" name="basic">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="娱乐特行场所类型">
|
||||
<el-input v-model="listQuery.cslx" placeholder="ktv"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshxydm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称(营业执照登记名称)">
|
||||
<el-input v-model="listQuery.dwmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所联系电话">
|
||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经营状况">
|
||||
<el-input v-model="listQuery.jyzt" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开业日期">
|
||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所地址">
|
||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人">
|
||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人证件号码">
|
||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人联系电话">
|
||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人居住地址">
|
||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人身份证号">
|
||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人联系方式">
|
||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人居住地址">
|
||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form-item label="保安服务公司名称">
|
||||
<el-input v-model="listQuery.bafwgsmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="保安负责人">
|
||||
<el-input v-model="listQuery.bafzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="保安负责人联系方式">
|
||||
<el-input v-model="listQuery.bafzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="保安人员数量">
|
||||
<el-input v-model="listQuery.bars" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所面积">
|
||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="娱乐经营许可证">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="安保服务公司合同">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="娱乐场所备案编号">
|
||||
<el-input v-model="listQuery.ylcsbabh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="娱乐场所备案机构名称">
|
||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="娱乐经营许可证编号">
|
||||
<el-input v-model="listQuery.yljyxkzbh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="娱乐场所经营许可证发证机构">
|
||||
<el-input v-model="listQuery.ylcsjyxkzfzjg" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="是否安装视频监控设备">
|
||||
<el-input v-model="listQuery.sfazspjksb" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否安装信息采集设备">
|
||||
<el-input v-model="listQuery.sfazxxcjsb" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="是否安装消防设备">
|
||||
<el-input v-model="listQuery.sfazxfsb" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任民警">
|
||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所行政区划">
|
||||
<el-input v-model="listQuery.csxzqh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="治安管理单位">
|
||||
<el-input v-model="listQuery.zaglbm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="娱乐场所管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
defaultSlot
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转区域</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "场所电话", prop: 'phone', placeholder: "请输入场所电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'frxm', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人证件号码", prop: 'frzjhm', placeholder: "请输入法人证件号码", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'frlxdh', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'jyzt', placeholder: "请选择经营状况", showType: "select", options: [{ label: '在业', value: '在业' }]},
|
||||
{ label: "场所类型", prop: 'cslx', placeholder: "请选择场所类型", showType: "select", options: [{ label: '全部', value: '全部' },]},
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "场所类型", prop: "cslx" },
|
||||
{ label: "经营状态", prop: "jyzt" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "法人姓名", prop: "frxm" },
|
||||
{ label: "法人证件号码", prop: "frzjhm" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">人脸抓拍采集信息</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="视频设备代码">
|
||||
<el-input v-model="listQuery.videoDeviceCode" placeholder="011022"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<el-input v-model="listQuery.captureTime" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="抓拍图片">
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.captureImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人像图片">
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
videoDeviceCode: '',
|
||||
captureTime: '',
|
||||
plateNumber: '',
|
||||
plateColor: '',
|
||||
plateType: '',
|
||||
vehicleColor: '',
|
||||
captureImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
],
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人脸抓拍采集信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 抓拍图片 -->
|
||||
<template #captureImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.captureImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.captureImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 人像图片 -->
|
||||
<template #personImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.personImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.personImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "视频设备编号", prop: 'deviceNo', placeholder: "请输入视频设备编号", showType: "input" },
|
||||
{ label: "日期时间", prop: 'captureTime', placeholder: "请选择日期时间", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "视频设备编号", prop: "deviceNo" },
|
||||
{ label: "抓拍图片", prop: "captureImage", slot: true },
|
||||
{ label: "人像图片", prop: "personImage", slot: true },
|
||||
{ label: "日期时间", prop: "captureTime" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">从业人员涉及案事件信息 {{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法律法规代码">
|
||||
<el-input v-model="listQuery.flfgdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="发布单位名称">
|
||||
<el-input v-model="listQuery.fbdwmc" placeholder="巴宜区筑梦路派出所"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布范围描述">
|
||||
<el-input v-model="listQuery.fbfwms" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="电子文件名称">
|
||||
<el-input v-model="listQuery.dzwjmc" placeholder="xxxxx通知"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布日期">
|
||||
<el-date-picker v-model="listQuery.fbrq" type="datetime" placeholder="2025/1/20 10:00:00" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="电子文件摘要">
|
||||
<el-input type="textarea" v-model="listQuery.dzwjzy" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="电子附件">
|
||||
<el-upload action="" :auto-upload="false">
|
||||
<el-button type="primary">点击下载</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
line-height: 30px;
|
||||
padding-left: 8px;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="法律法规信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('eidt', row)">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "电子文件名称", prop: 'dzwjmc', placeholder: "请输入电子文件名称", showType: "input" },
|
||||
{ label: "发布单位", prop: 'fbdw', placeholder: "请输入发布单位", showType: "input" },
|
||||
{ label: "发布日期", prop: 'fbrq', placeholder: "请选择发布日期", showType: "date" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, dzwjmc: 'xxxxx法规', djr: '李四', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00'},
|
||||
{id: 2, dzwjmc: 'xxxxx法规', djr: '李四', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00'},
|
||||
{id: 3, dzwjmc: 'xxxxx法规', djr: '李四', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00'},
|
||||
{id: 4, dzwjmc: 'xxxxx法规', djr: '李四', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00'},
|
||||
{id: 5, dzwjmc: 'xxxxx法规', djr: '李四', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "电子文件名称", prop: "dzwjmc" },
|
||||
{ label: "登记人", prop: "djr" },
|
||||
{ label: "发布单位", prop: "fbdw" },
|
||||
{ label: "发布日期", prop: "fbrq" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
let url = '/mosty-lzcj/tbDwMbkf/delete';
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">通知通告信息 {{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="通知通告代码">
|
||||
<el-input v-model="listQuery.tzggdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布人姓名">
|
||||
<el-input v-model="listQuery.fbrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="发布单位名称">
|
||||
<el-input v-model="listQuery.fbdwmc" placeholder="巴宜区筑梦派出所"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="电子文件名称">
|
||||
<el-input v-model="listQuery.dzwjmc" placeholder="xxxxx通知"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布范围描述">
|
||||
<el-input v-model="listQuery.fbfwms" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="紧急程度">
|
||||
<el-input v-model="listQuery.jjcd" placeholder="非常紧急"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布日期">
|
||||
<el-date-picker v-model="listQuery.fbrq" type="datetime" placeholder="2025/1/20 10:00:00" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="电子文件摘要">
|
||||
<el-input type="textarea" v-model="listQuery.dzwjzy" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="电子附件">
|
||||
<el-upload action="" :auto-upload="false">
|
||||
<el-button>点击下载</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
line-height: 30px;
|
||||
padding-left: 8px;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="通知通告信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('eidt', row)">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "电子文件名称", prop: 'dzwjmc', placeholder: "请输入电子文件名称", showType: "input" },
|
||||
{ label: "发布单位", prop: 'fbdw', placeholder: "请输入发布单位", showType: "input" },
|
||||
{ label: "发布日期", prop: 'fbrq', placeholder: "请选择发布日期", showType: "date" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, dzwjmc: 'xxxxx通知', djr: '李四', jjcd: '非常紧急', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00', djr: '张山'},
|
||||
{id: 2, dzwjmc: 'xxxxx通知', djr: '李四', jjcd: '非常紧急', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00', djr: '张山'},
|
||||
{id: 3, dzwjmc: 'xxxxx通知', djr: '李四', jjcd: '非常紧急', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00', djr: '张山'},
|
||||
{id: 4, dzwjmc: 'xxxxx通知', djr: '李四', jjcd: '非常紧急', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00', djr: '张山'},
|
||||
{id: 5, dzwjmc: 'xxxxx通知', djr: '李四', jjcd: '非常紧急', fbdw: '巴吉区筑梦路派出所', fbrq: '2025/1/20 10:00:00', djr: '张山'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 200,
|
||||
tableColumn: [
|
||||
{ label: "电子文件名称", prop: "dzwjmc" },
|
||||
{ label: "发布人", prop: "djr" },
|
||||
{ label: "紧急程度", prop: "jjcd" },
|
||||
{ label: "发布单位", prop: "fbdw" },
|
||||
{ label: "发布日期", prop: "fbrq" },
|
||||
{ label: "登记人", prop: "djr" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
let url = '/mosty-lzcj/tbDwMbkf/delete';
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">场所案事件信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="案事件编号">
|
||||
<el-input v-model="listQuery.asjbh" placeholder="123456"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="按时间发生时间">
|
||||
<el-input v-model="listQuery.sbmc" placeholder="2025-03-10 10:10:10"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="简要案情">
|
||||
<el-input v-model="listQuery.sbxh" type="textarea" placeholder="1234566"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="labelTileile">
|
||||
<span>案事件人员</span>
|
||||
<el-button size="small" @click="modelValue = true,titleValue = '新增'">新增人员</el-button>
|
||||
</div>
|
||||
|
||||
<div class="form-row" v-for="(it,idx) in listQuery.list" :key="idx">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="it.xm" placeholder="xxxxxxx"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="证件号码">
|
||||
<el-input v-model="it.zjhm" placeholder="100"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增人员 -->
|
||||
<el-dialog :title="titleValue" width="700px" :model-value="modelValue" @close="closed">
|
||||
<el-form :model="addForm" :rules="rules" ref="addFormVal" :inline="true">
|
||||
<el-form-item label="姓名" prop="xm">
|
||||
<el-input v-model="addForm.xm" placeholder="请输入姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证" prop="zjhm">
|
||||
<el-input v-model="addForm.zjhm" placeholder="请输入身份证" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="tc">
|
||||
<el-button @click="closed">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
const addFormVal = ref()
|
||||
const modelValue = ref(false)
|
||||
const titleValue = ref('')
|
||||
const addForm = reactive({});
|
||||
const rules = reactive({
|
||||
xm: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
zjhm: [{ required: true, message: '请输入身份证', trigger: 'blur' }],
|
||||
});
|
||||
const closed = () => {
|
||||
modelValue.value = false;
|
||||
addForm.xm = ''
|
||||
addForm.zjhm = ''
|
||||
};
|
||||
const onComfirm = () => {
|
||||
addFormVal.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
modelValue.value = false;
|
||||
listQuery.value.list.push(addForm);
|
||||
})
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="场所案事件">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('eidt', row)">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "处罚日期", prop: 'clrq', placeholder: "案件办理时间", showType: "datePicker" },
|
||||
{ label: "处罚类别", prop: 'cflb', placeholder: "案件类别", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv', ajlb:'刑事', ajfssj:'2022/1/20 10:00:00', ajclqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', ajlb:'纠纷', ajfssj:'2022/1/20 10:00:00', ajclqk:'xxxxxxxxxx'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 200, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "案件类别", prop: "ajlb" },
|
||||
{ label: "案事件发生时间", prop: "ajfssj" },
|
||||
{ label: "案事件处理结果", prop: "ajclqk" },
|
||||
{ label: "简要案情", prop: "jyaq" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
let url = '/mosty-lzcj/tbDwMbkf/delete';
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">人员抓拍采集信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="视频设备代码">
|
||||
<el-input v-model="listQuery.videoDeviceCode" placeholder="011022"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<el-input v-model="listQuery.captureTime" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="背包判断标识">
|
||||
<el-input v-model="listQuery.bbpdbs" placeholder="是"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="带帽判断标识">
|
||||
<el-input v-model="listQuery.dmpdbs" placeholder="是"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
||||
<el-form-item label="抓拍图片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.captureImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="人像图片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
videoDeviceCode: '',
|
||||
captureTime: '',
|
||||
plateNumber: '',
|
||||
plateColor: '',
|
||||
plateType: '',
|
||||
vehicleColor: '',
|
||||
captureImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
],
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="人员抓拍采集信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 抓拍图片 -->
|
||||
<template #captureImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.captureImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.captureImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 人像图片 -->
|
||||
<template #personImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.personImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.personImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "视频设备编号", prop: 'deviceNo', placeholder: "请输入视频设备编号", showType: "input" },
|
||||
{ label: "日期时间", prop: 'captureTime', placeholder: "请选择日期时间", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00', backpackFlag: '是', hatFlag: '是'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00', backpackFlag: '是', hatFlag: '是'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00', backpackFlag: '是', hatFlag: '是'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00', backpackFlag: '是', hatFlag: '是'},
|
||||
{deviceNo:'123456789', captureImage:'', personImage:'', captureTime: '2025/1/20 10:00:00', backpackFlag: '是', hatFlag: '是'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "视频设备编号", prop: "deviceNo" },
|
||||
{ label: "抓拍图片", prop: "captureImage", slot: true },
|
||||
{ label: "人像图片", prop: "personImage", slot: true },
|
||||
{ label: "日期时间", prop: "captureTime" },
|
||||
{ label: "背包判断标识", prop: "backpackFlag" },
|
||||
{ label: "带帽判断标识", prop: "hatFlag" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">娱乐场所从业人员日志详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="0111"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="从业人员姓名">
|
||||
<el-input v-model="listQuery.cyrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="从业人员证件号码">
|
||||
<el-input v-model="listQuery.cyrzjhm" placeholder="511123456987452256"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="工作开始时间">
|
||||
<el-input v-model="listQuery.gzkssj" placeholder="10:00:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作结束时间">
|
||||
<el-input v-model="listQuery.gzjssj" placeholder="23:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="娱乐场所从业人员日志信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "场所名称", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv', personName:'张三', idCard:'511123456987452256', startTime:'10:00:00', endTime:'23:00:00'},
|
||||
{name:'天上人间ktv', personName:'张三', idCard:'511123456987452256', startTime:'10:00:00', endTime:'23:00:00'},
|
||||
{name:'天上人间ktv', personName:'张三', idCard:'511123456987452256', startTime:'10:00:00', endTime:'23:00:00'},
|
||||
{name:'天上人间ktv', personName:'张三', idCard:'511123456987452256', startTime:'10:00:00', endTime:'23:00:00'},
|
||||
{name:'天上人间ktv', personName:'张三', idCard:'511123456987452256', startTime:'10:00:00', endTime:'23:00:00'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "从业人员姓名", prop: "personName" },
|
||||
{ label: "从业人员证件号码", prop: "idCard" },
|
||||
{ label: "工作开始时间", prop: "startTime" },
|
||||
{ label: "工作结束时间", prop: "endTime" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">警情情况详情详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.placeCode" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.placeName" placeholder="天上人间KTV"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="警情登记号">
|
||||
<el-input v-model="listQuery.policeRecordNo" placeholder="1234567"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警情类别">
|
||||
<el-input v-model="listQuery.policeType" placeholder="矛盾纠纷"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="报警人姓名">
|
||||
<el-input v-model="listQuery.reporterName" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间">
|
||||
<el-input v-model="listQuery.reportTime" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="接警时间">
|
||||
<el-input v-model="listQuery.receiveTime" placeholder="2025/1/20 10:01:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="处警人姓名">
|
||||
<el-input v-model="listQuery.handlerName" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="警情处理结果">
|
||||
<el-input v-model="listQuery.handleResult" type="textarea" :rows="3" placeholder="自行协商"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="简要案情">
|
||||
<el-input v-model="listQuery.briefCase" type="textarea" :rows="5" placeholder="请输入简要案情"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
placeCode: '',
|
||||
placeName: '',
|
||||
policeRecordNo: '',
|
||||
policeType: '',
|
||||
reporterName: '',
|
||||
reportTime: '',
|
||||
receiveTime: '',
|
||||
handlerName: '',
|
||||
handleResult: '',
|
||||
briefCase: ''
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="警力情况信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 抓拍图片 -->
|
||||
<template #captureImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.captureImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.captureImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "报警人姓名", prop: 'reporterName', placeholder: "请输入报警人姓名", showType: "input" },
|
||||
{ label: "警情类别", prop: 'policeType', placeholder: "请输入警情类别", showType: "input" },
|
||||
{ label: "报警时间", prop: 'reportTime', placeholder: "请选择报警时间", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{placeName:'天上人间ktv', policeType:'刑事', reportTime:'2022/1/20 10:00:00', reporterName:'张三', handlerName:'李四'},
|
||||
{placeName:'天上人间ktv', policeType:'纠纷', reportTime:'2022/1/20 10:00:00', reporterName:'张三', handlerName:'李四'},
|
||||
{placeName:'天上人间ktv', policeType:'纠纷', reportTime:'2022/1/20 10:00:00', reporterName:'张三', handlerName:'李四'},
|
||||
{placeName:'天上人间ktv', policeType:'纠纷', reportTime:'2022/1/20 10:00:00', reporterName:'张三', handlerName:'李四'},
|
||||
{placeName:'天上人间ktv', policeType:'纠纷', reportTime:'2022/1/20 10:00:00', reporterName:'张三', handlerName:'李四'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "警情类别", prop: "policeType" },
|
||||
{ label: "报警时间", prop: "reportTime" },
|
||||
{ label: "报警人姓名", prop: "reporterName" },
|
||||
{ label: "处警人姓名", prop: "handlerName" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">从业人员详情 {{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="listQuery.xm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="证件号码">
|
||||
<el-input v-model="listQuery.zjhm" placeholder="511123456789654125"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="职业类别代码">
|
||||
<el-input v-model="listQuery.zylbdm" placeholder="123456"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="居住地址">
|
||||
<el-input v-model="listQuery.jzdz" placeholder="林芝市巴宜区区政府路119号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="入职时间">
|
||||
<el-date-picker v-model="listQuery.rzsj" type="date" placeholder="2025/1/20" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="离职时间">
|
||||
<el-date-picker v-model="listQuery.lzsj" type="date" placeholder="请选择" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="listQuery.lxdh" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="执业许可证编号">
|
||||
<el-input v-model="listQuery.zyxkzbh" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="岗位">
|
||||
<el-input v-model="listQuery.gw" placeholder=""/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资格证类型">
|
||||
<el-input v-model="listQuery.zgzlx" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="资格证编号">
|
||||
<el-input v-model="listQuery.zgzbh" placeholder=""/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资格证有效期截止日期">
|
||||
<el-date-picker v-model="listQuery.zgzyxqjzrq" type="date" placeholder="请选择" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="资格证有效期起始日期">
|
||||
<el-date-picker v-model="listQuery.zgzyxqqsrq" type="date" placeholder="请选择" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="抓拍图片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.captureImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
captureImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
],
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
line-height: 30px;
|
||||
padding-left: 8px;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageTitle title="从业人员"/>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "人员姓名", prop: 'xm', placeholder: "请输入人员姓名", showType: "input" },
|
||||
{ label: "证件号码", prop: 'zjhm', placeholder: "请输入证件号码", showType: "input" },
|
||||
{ label: "联系电话", prop: 'lxdh', placeholder: "请输入联系电话", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{xm:'王五', zjhm:'511222222222222', lxfs:'15211111111', gw:'保洁', rzsj:'2022/1/20'},
|
||||
{xm:'王五', zjhm:'511222222222222', lxfs:'15211111111', gw:'保洁', rzsj:'2022/1/20'},
|
||||
{xm:'王五', zjhm:'511222222222222', lxfs:'15211111111', gw:'保洁', rzsj:'2022/1/20'},
|
||||
{xm:'王五', zjhm:'511222222222222', lxfs:'15211111111', gw:'保洁', rzsj:'2022/1/20'},
|
||||
{xm:'王五', zjhm:'511222222222222', lxfs:'15211111111', gw:'保洁', rzsj:'2022/1/20'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 120, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "证件号码", prop: "zjhm" },
|
||||
{ label: "联系方式", prop: "lxfs" },
|
||||
{ label: "岗位", prop: "gw" },
|
||||
{ label: "入职时间", prop: "rzsj" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">可疑情况详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.placeCode" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.placeName" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="可疑情况登记号">
|
||||
<el-input v-model="listQuery.policeRecordNo" placeholder="1"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="可疑情况类别">
|
||||
<el-input v-model="listQuery.policeType" placeholder="矛盾纠纷"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.reporterName" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="可疑情况简要描述">
|
||||
<el-input v-model="listQuery.briefCase" type="textarea" :rows="5" placeholder="请输入可疑情况简要描述"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
placeCode: '',
|
||||
placeName: '',
|
||||
policeRecordNo: '',
|
||||
policeType: '',
|
||||
reporterName: '',
|
||||
reportTime: '',
|
||||
receiveTime: '',
|
||||
handlerName: '',
|
||||
handleResult: '',
|
||||
briefCase: ''
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="可疑情况信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 抓拍图片 -->
|
||||
<template #captureImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.captureImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.captureImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "登记人姓名", prop: 'reporterName', placeholder: "登记人姓名", showType: "input" },
|
||||
{ label: "可疑情况类别", prop: 'policeType', placeholder: "可疑情况类别", showType: "input" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{placeName:'天上人间ktv', registrantName:'张三', situationType:'纠纷', situationDesc:'xxxxxxxxxxxx', situationNo: '5'},
|
||||
{placeName:'天上人间ktv', registrantName:'张三', situationType:'纠纷', situationDesc:'xxxxxxxxxxxx', situationNo: '4'},
|
||||
{placeName:'天上人间ktv', registrantName:'张三', situationType:'纠纷', situationDesc:'xxxxxxxxxxxx', situationNo: '3'},
|
||||
{placeName:'天上人间ktv', registrantName:'张三', situationType:'纠纷', situationDesc:'xxxxxxxxxxxx', situationNo: '2'},
|
||||
{placeName:'天上人间ktv', registrantName:'张三', situationType:'纠纷', situationDesc:'xxxxxxxxxxxx', situationNo: '1'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "登记人姓名", prop: "registrantName" },
|
||||
{ label: "可疑情况类别", prop: "situationType" },
|
||||
{ label: "可疑情况简要描述", prop: "situationDesc" },
|
||||
{ label: "可疑情况登记号", prop: "situationNo" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">娱乐场所附加信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="0111"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="娱乐场所类型代码">
|
||||
<el-input v-model="listQuery.ylcslxdm" placeholder="001"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="核定消费者数量">
|
||||
<el-input v-model="listQuery.hdxfzsl" placeholder="100"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="包厢房间数">
|
||||
<el-input v-model="listQuery.bxfjs" placeholder="20"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="娱乐场所治安级别代码">
|
||||
<el-input v-model="listQuery.ylcszajbdm" placeholder="90"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="娱乐项目名称" style="width:50%;">
|
||||
<el-input v-model="listQuery.ylxmmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="娱乐场所附加管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv', cslx:'ktv', hdjyrs: 100, bffjsl: 20, zaglbm: 90},
|
||||
{name:'天上人间ktv', cslx:'ktv', hdjyrs: 100, bffjsl: 20, zaglbm: 90},
|
||||
{name:'天上人间ktv', cslx:'ktv', hdjyrs: 100, bffjsl: 20, zaglbm: 90},
|
||||
{name:'天上人间ktv', cslx:'ktv', hdjyrs: 100, bffjsl: 20, zaglbm: 90},
|
||||
{name:'天上人间ktv', cslx:'ktv', hdjyrs: 100, bffjsl: 20, zaglbm: 90},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 120, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "娱乐场所类型", prop: "cslx" },
|
||||
{ label: "核定接待者数量", prop: "hdjyrs" },
|
||||
{ label: "包厢房间数量", prop: "bffjsl" },
|
||||
{ label: "治安级别代码", prop: "zaglbm" },
|
||||
{ label: "娱乐项目名称", prop: "ylxmmc" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">场所处罚信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="01"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所处罚登记号号">
|
||||
<el-input v-model="listQuery.cscfdjh" placeholder="1234567"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所处罚日期">
|
||||
<el-input v-model="listQuery.cscfrq" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所处罚批准文号码">
|
||||
<el-input v-model="listQuery.cscfpzwh" placeholder="1234567"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="批准机关名称">
|
||||
<el-input v-model="listQuery.pzjgmc" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="场所处罚类别">
|
||||
<el-input v-model="listQuery.cscflb" placeholder="罚款"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所处罚原因简要情况">
|
||||
<el-input type="textarea" v-model="listQuery.cscfyyqk" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所处罚结果简要情况">
|
||||
<el-input type="textarea" v-model="listQuery.cscfjgqk" :rows="4" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageTitle title="场所处罚信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "处罚日期", prop: 'cfrq', placeholder: "请选择处罚日期", showType: "date" },
|
||||
{ label: "处罚类别", prop: 'cflb', placeholder: "请选择处罚类别", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv', cflb:'刑事', cfrq:'2022/1/20 10:00:00', cfyyqk:'', cfjgqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', cflb:'纠纷', cfrq:'2022/1/20 10:00:00', cfyyqk:'', cfjgqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', cflb:'纠纷', cfrq:'2022/1/20 10:00:00', cfyyqk:'', cfjgqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', cflb:'纠纷', cfrq:'2022/1/20 10:00:00', cfyyqk:'', cfjgqk:'xxxxxxxxxx'},
|
||||
{name:'天上人间ktv', cflb:'纠纷', cfrq:'2022/1/20 10:00:00', cfyyqk:'', cfjgqk:'xxxxxxxxxx'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 220, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "处罚类别", prop: "cflb" },
|
||||
{ label: "处罚日期", prop: "cfrq" },
|
||||
{ label: "处罚原因简要情况", prop: "cfyyqk" },
|
||||
{ label: "处罚结果简要情况", prop: "cfjgqk" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
// let url = '/mosty-lzcj/TbDwYlth/delete';
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">娱乐场所电子游戏机详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所代码">
|
||||
<el-input v-model="listQuery.csdm" placeholder="0111"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="天上人间ktv"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="电子游戏机">
|
||||
<el-input v-model="listQuery.dzyx" placeholder="捕鱼机"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌型号">
|
||||
<el-input v-model="listQuery.ppxh" placeholder="ashaj200"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="数量">
|
||||
<el-input v-model="listQuery.sl" placeholder="20"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="厂商名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="xxxx"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="相片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="娱乐场所电子游戏机信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "场所名称", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间ktv', deviceType:'捕鱼机', model:'ashaj200', count: 20, manufacturer: 'xxxx'},
|
||||
{name:'天上人间ktv', deviceType:'捕鱼机', model:'ashaj200', count: 20, manufacturer: 'xxxxx'},
|
||||
{name:'天上人间ktv', deviceType:'捕鱼机', model:'ashaj200', count: 20, manufacturer: 'xxxx'},
|
||||
{name:'天上人间ktv', deviceType:'捕鱼机', model:'ashaj200', count: 20, manufacturer: 'xxxx'},
|
||||
{name:'天上人间ktv', deviceType:'捕鱼机', model:'ashaj200', count: 20, manufacturer: 'xxxx'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "电子游戏机", prop: "deviceType" },
|
||||
{ label: "品牌型号", prop: "model" },
|
||||
{ label: "数量", prop: "count" },
|
||||
{ label: "厂商名称", prop: "manufacturer" },
|
||||
{ label: "图片", prop: "image", slot: true }
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,131 @@
|
||||
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">开锁业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开锁业务日期">
|
||||
<el-input v-model="listQuery.ywrq" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="毛王开锁"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="从业人员姓名">
|
||||
<el-input v-model="listQuery.cyrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="从业人员证件号码">
|
||||
<el-input v-model="listQuery.cyrzjhm" placeholder="511123456789654125"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求开锁人姓名">
|
||||
<el-input v-model="listQuery.qqksrxm" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="请求开锁人证件号码">
|
||||
<el-input v-model="listQuery.qqksrzjhm" placeholder="511111111111111111"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开锁业务地址">
|
||||
<el-input v-model="listQuery.ywdz" placeholder="林芝市巴宜区xxxx路18号"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="开锁业务类型">
|
||||
<el-input v-model="listQuery.ywlx" placeholder="开锁"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="见证人姓名">
|
||||
<el-input v-model="listQuery.jzrxm" placeholder="王五"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="见证人证件号">
|
||||
<el-input v-model="listQuery.jzrzjh" placeholder="514154785965214741"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="见证人联系方式">
|
||||
<el-input v-model="listQuery.jzrlxfs" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
143
src/views/backOfficeSystem/LockSmith/BusinessGL/index.vue
Normal file
143
src/views/backOfficeSystem/LockSmith/BusinessGL/index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="开锁业务信息管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "从业人姓名", prop: 'cyxm', placeholder: "请输入从业人姓名", showType: "input" },
|
||||
{ label: "请求开锁人姓名", prop: 'qqksrxm', placeholder: "请输入请求开锁人姓名", showType: "input" },
|
||||
{ label: "请求开锁人身份证号", prop: 'qqksrsfzh', placeholder: "请输入请求开锁人身份证号", showType: "input" },
|
||||
{ label: "见证人姓名", prop: 'jzrxm', placeholder: "请输入见证人姓名", showType: "input" },
|
||||
{ label: "见证人联系电话", prop: 'jzrlxdh', placeholder: "请输入见证人联系电话", showType: "input" },
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'1',ssxq:'1',cyxm:'1',qqksrxm:'1',qqksrsfzh:'1',jzrxm:'1'}
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 120, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "从业人姓名", prop: "cyxm" },
|
||||
{ label: "请求开锁人姓名", prop: "qqksrxm" },
|
||||
{ label: "请求开锁人身份证号", prop: "qqksrsfzh" },
|
||||
{ label: "见证人姓名", prop: "jzrxm" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="场所信息" name="basic">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所联系电话">
|
||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经营状况">
|
||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所面积">
|
||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开业日期">
|
||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所地址">
|
||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人">
|
||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人证件号码">
|
||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人联系电话">
|
||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人居住地址">
|
||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人身份证号">
|
||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人联系方式">
|
||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人居住地址">
|
||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机修场所备案编号">
|
||||
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所备案机构名称">
|
||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备案登记日期">
|
||||
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="责任民警">
|
||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('开锁业场所管理详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
151
src/views/backOfficeSystem/LockSmith/LocationGL/index.vue
Normal file
151
src/views/backOfficeSystem/LockSmith/LocationGL/index.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="开锁业场所管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转区域</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "场所电话", prop: 'phone', placeholder: "请输入场所电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'frxm', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人证件号码", prop: 'frzjhm', placeholder: "请输入法人证件号码", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'frlxdh', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'jyzt', placeholder: "请选择经营状况", showType: "select", options: [{ label: '在业', value: '在业' }]},
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 250,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "经营状态", prop: "jyzt" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "法人姓名", prop: "frxm" },
|
||||
{ label: "法人证件号码", prop: "frzjhm" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwKscs/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">事故车辆附加信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="事故车辆发现时间">
|
||||
<el-input v-model="listQuery.sgfxsj" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="事故照片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
151
src/views/backOfficeSystem/Mechanics/AccidentVehicle/index.vue
Normal file
151
src/views/backOfficeSystem/Mechanics/AccidentVehicle/index.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="事故车辆附加信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "业务流水号码", prop: 'businessNo', placeholder: "请输入业务流水号码", showType: "input" },
|
||||
{ label: "事故车辆发现时间", prop: 'discoveryTime', placeholder: "请选择事故车辆发现时间", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo1.jpg'},
|
||||
{id: 2, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo2.jpg'},
|
||||
{id: 3, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo3.jpg'},
|
||||
{id: 4, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo4.jpg'},
|
||||
{id: 5, businessNo: '01131213', registrantName: '张三', discoveryTime: '2025/1/20 10:00:00', accidentPhoto: 'https://example.com/photo5.jpg'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "业务流水号码", prop: "businessNo" },
|
||||
{ label: "登记人姓名", prop: "registrantName" },
|
||||
{ label: "事故车辆发现时间", prop: "discoveryTime" },
|
||||
{ label: "事故照片", prop: "accidentPhoto", slot: true },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">承接车辆基本信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车主姓名">
|
||||
<el-input v-model="listQuery.czxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="车主证件号码">
|
||||
<el-input v-model="listQuery.czzjhm" placeholder="511123456789012345"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="车主联系电话">
|
||||
<el-input v-model="listQuery.czlxdh" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车号牌种类">
|
||||
<el-input v-model="listQuery.jdchpzl" placeholder="绿牌"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车车牌号码">
|
||||
<el-input v-model="listQuery.jdchphm" placeholder="藏G.123456"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车中文名称">
|
||||
<el-input v-model="listQuery.jdczwmc" placeholder="大众"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车英文名称">
|
||||
<el-input v-model="listQuery.jdcywmc" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车发动机型号">
|
||||
<el-input v-model="listQuery.fdjh" placeholder="14653158455"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车行驶证芯片号">
|
||||
<el-input v-model="listQuery.jdcxszxph" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车车架号">
|
||||
<el-input v-model="listQuery.jdccjh" placeholder="544845441154441"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车车辆类型">
|
||||
<el-input v-model="listQuery.jdccllx" placeholder="桥车"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车车身颜色">
|
||||
<el-input v-model="listQuery.jdccsys" placeholder="黑色"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="机动车照片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.captureImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
captureImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
],
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
line-height: 30px;
|
||||
padding-left: 8px;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
144
src/views/backOfficeSystem/Mechanics/CarBasicInfo/index.vue
Normal file
144
src/views/backOfficeSystem/Mechanics/CarBasicInfo/index.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageTitle title="承接车辆基本信息"/>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "车主姓名", prop: 'zsxm', placeholder: "请输入车主姓名", showType: "input" },
|
||||
{ label: "车牌号", prop: 'cph', placeholder: "请输入车牌号", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{xh: 1, zsxm: '张三', cph: '藏G.123456', hpzl: '绿牌', zxppmc: '大众', fdjh: '123466789', cjh: '123466789'},
|
||||
{xh: 2, zsxm: '张三', cph: '藏G.123456', hpzl: '绿牌', zxppmc: '大众', fdjh: '123466789', cjh: '123466789'},
|
||||
{xh: 3, zsxm: '张三', cph: '藏G.123456', hpzl: '绿牌', zxppmc: '大众', fdjh: '123466789', cjh: '123466789'},
|
||||
{xh: 4, zsxm: '张三', cph: '藏G.123456', hpzl: '绿牌', zxppmc: '大众', fdjh: '123466789', cjh: '123466789'},
|
||||
{xh: 5, zsxm: '张三', cph: '藏G.123456', hpzl: '绿牌', zxppmc: '大众', fdjh: '123466789', cjh: '123466789'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 120, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "车主姓名", prop: "zsxm" },
|
||||
{ label: "车牌号", prop: "cph" },
|
||||
{ label: "号牌种类", prop: "hpzl" },
|
||||
{ label: "中文品牌名称", prop: "zxppmc" },
|
||||
{ label: "发动机号", prop: "fdjh" },
|
||||
{ label: "车架号", prop: "cjh" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">承接车辆交接信息{{ title }}</span>
|
||||
<div>
|
||||
<el-button type="primary" v-if="title != '详情'" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="承接车辆">
|
||||
<el-input v-model="listQuery.jdchphm" placeholder="藏G.123456"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="送车人姓名">
|
||||
<el-input v-model="listQuery.czxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="送车人证件号码">
|
||||
<el-input v-model="listQuery.czzjhm" placeholder="511123456789012345"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="送车人联系电话">
|
||||
<el-input v-model="listQuery.czlxdh" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="收车时间">
|
||||
<el-input v-model="listQuery.scsj" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="收车人姓名">
|
||||
<el-input v-model="listQuery.sqrxm" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="收车人证件号码">
|
||||
<el-input v-model="listQuery.sqrzjhm" placeholder="511123456789012444"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="收车人联系方式">
|
||||
<el-input v-model="listQuery.sqrlxfs" placeholder="15211111111"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="取车时间">
|
||||
<el-input v-model="listQuery.qcsj" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('详情');
|
||||
const listQuery = ref({
|
||||
captureImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
],
|
||||
list: [
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
{xm:'张三',zjhm:'510183199626565555'},
|
||||
]
|
||||
});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
// loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
// qcckPost(params, url).then((res) => {
|
||||
// proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
// close()
|
||||
// emit("updateDate",modelLx.value);
|
||||
// }).catch(()=>{
|
||||
// loading.value = false;
|
||||
// });
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
title.value = type == 'add' ? '新增' : type == 'eidt' ? '编辑' : '详情'
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.labelTileile{
|
||||
background-color: #F7FAFB;
|
||||
border: 1px solid #E3E7ED;
|
||||
line-height: 30px;
|
||||
padding-left: 8px;
|
||||
// text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<PageTitle title="承接车辆交接信息"/>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "车主姓名", prop: 'zsxm', placeholder: "请输入车主姓名", showType: "input" },
|
||||
{ label: "车牌号", prop: 'cph', placeholder: "请输入车牌号", showType: "input" },
|
||||
{ label: "车主联系电话", prop: 'zslxdh', placeholder: "请输入车主联系电话", showType: "input" },
|
||||
{ label: "送车人姓名", prop: 'scrxm', placeholder: "请输入送车人姓名", showType: "input" },
|
||||
{ label: "送车人联系电话", prop: 'scrlxdh', placeholder: "请输入送车人联系电话", showType: "input" },
|
||||
{ label: "取车人姓名", prop: 'qcrxm', placeholder: "请输入取车人姓名", showType: "input" },
|
||||
{ label: "取车人联系电话", prop: 'qcrlxdh', placeholder: "请输入取车人联系电话", showType: "input" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{xh: 1, cph: '藏G.123456', scrxm: '张三', scrlxdh: '15211111111', qcrxm: '李四', qcrlxdh: '15222222222', qcsj: '2025/1/20 10:00:00'},
|
||||
{xh: 2, cph: '藏G.123456', scrxm: '张三', scrlxdh: '15211111111', qcrxm: '李四', qcrlxdh: '15222222222', qcsj: '2025/1/20 10:00:00'},
|
||||
{xh: 3, cph: '藏G.123456', scrxm: '张三', scrlxdh: '15211111111', qcrxm: '李四', qcrlxdh: '15222222222', qcsj: '2025/1/20 10:00:00'},
|
||||
{xh: 4, cph: '藏G.123456', scrxm: '张三', scrlxdh: '15211111111', qcrxm: '李四', qcrlxdh: '15222222222', qcsj: '2025/1/20 10:00:00'},
|
||||
{xh: 5, cph: '藏G.123456', scrxm: '张三', scrlxdh: '15211111111', qcrxm: '李四', qcrlxdh: '15222222222', qcsj: '2025/1/20 10:00:00'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 120, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "车牌号", prop: "cph" },
|
||||
{ label: "送车人姓名", prop: "scrxm" },
|
||||
{ label: "送车人联系电话", prop: "scrlxdh" },
|
||||
{ label: "取车人姓名", prop: "qcrxm" },
|
||||
{ label: "取车人联系电话", prop: "qcrlxdh" },
|
||||
{ label: "取车时间", prop: "qcsj" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="场所信息" name="basic">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所联系电话">
|
||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经营状况">
|
||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所面积">
|
||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开业日期">
|
||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所地址">
|
||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人">
|
||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人证件号码">
|
||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人联系电话">
|
||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人居住地址">
|
||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人身份证号">
|
||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人联系方式">
|
||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人居住地址">
|
||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机修场所备案编号">
|
||||
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所备案机构名称">
|
||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备案登记日期">
|
||||
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="责任民警">
|
||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('机修场所信息管理详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
158
src/views/backOfficeSystem/Mechanics/MachineRepair/index.vue
Normal file
158
src/views/backOfficeSystem/Mechanics/MachineRepair/index.vue
Normal file
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="机修场所信息管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转区域</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "单位名称", prop: 'name', placeholder: "请输入单位名称", showType: "input" },
|
||||
{ label: "单位电话", prop: 'phone', placeholder: "请输入单位电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'frxm', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人身份证号", prop: 'frzjhm', placeholder: "请输入法人身份证号", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'frlxdh', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'jyzt', placeholder: "请选择经营状况", showType: "select", options: [{ label: '在业', value: '在业' }]},
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天猫修车',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三四五六',frzjhm:'511222222222222'},
|
||||
{name:'天猫修车',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三四五六',frzjhm:'511222222222222'},
|
||||
{name:'天猫修车',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三四五六',frzjhm:'511222222222222'},
|
||||
{name:'天猫修车',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三四五六',frzjhm:'511222222222222'},
|
||||
{name:'天猫修车',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三四五六',frzjhm:'511222222222222'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "单位名称", prop: "name" },
|
||||
{ label: "经营状态", prop: "jyzt" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "法人姓名", prop: "frxm" },
|
||||
{ label: "法人身份证号", prop: "frzjhm" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">车辆配件业务登记信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车配件项目序号">
|
||||
<el-input v-model="listQuery.xmxh" placeholder="05"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机动车配件物品名称">
|
||||
<el-input v-model="listQuery.wpmc" placeholder="轮胎"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车配件品牌型号">
|
||||
<el-input v-model="listQuery.ppxh" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="数量">
|
||||
<el-input v-model="listQuery.sl" placeholder="4"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="车辆配件业务登记信息"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "业务流水号码", prop: 'businessNo', placeholder: "请输入业务流水号码", showType: "input" },
|
||||
{ label: "配件物品名称", prop: 'accessoryName', placeholder: "请输入配件物品名称", showType: "input" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, businessNo: '01131213', accessoryNo: '05', accessoryName: '轮胎', brandModel: '', quantity: 4},
|
||||
{id: 2, businessNo: '01131213', accessoryNo: '05', accessoryName: '轮胎', brandModel: '', quantity: 4},
|
||||
{id: 3, businessNo: '01131213', accessoryNo: '05', accessoryName: '轮胎', brandModel: '', quantity: 4},
|
||||
{id: 4, businessNo: '01131213', accessoryNo: '05', accessoryName: '轮胎', brandModel: '', quantity: 4},
|
||||
{id: 5, businessNo: '01131213', accessoryNo: '05', accessoryName: '轮胎', brandModel: '', quantity: 4},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "业务流水号码", prop: "businessNo" },
|
||||
{ label: "配件项目序号", prop: "accessoryNo" },
|
||||
{ label: "配件物品名称", prop: "accessoryName" },
|
||||
{ label: "配件品牌型号", prop: "brandModel" },
|
||||
{ label: "数量", prop: "quantity" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">机动车修理业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车修理项目序号">
|
||||
<el-input v-model="listQuery.xmxh" placeholder="05"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="承接车辆号牌号">
|
||||
<el-input v-model="listQuery.cph" placeholder="藏G.123456"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="机动车修理项目">
|
||||
<el-input v-model="listQuery.xmmc" placeholder="换轮胎"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="承接日期">
|
||||
<el-input v-model="listQuery.cjrq" placeholder="2025/1/18 10:00:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="交付日期">
|
||||
<el-input v-model="listQuery.jfrq" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="车主驾驶证号">
|
||||
<el-input v-model="listQuery.jszh" placeholder="654644654654"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="从业人员">
|
||||
<el-input v-model="listQuery.cyry" placeholder="李四"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
147
src/views/backOfficeSystem/Mechanics/VehicleRepairs/index.vue
Normal file
147
src/views/backOfficeSystem/Mechanics/VehicleRepairs/index.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="机动车修理业务信息 "/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "车牌号", prop: 'plateNumber', placeholder: "请输入车牌号", showType: "input" },
|
||||
{ label: "机动车修理项目", prop: 'repairItem', placeholder: "请输入机动车修理项目", showType: "input" },
|
||||
{ label: "从业人员", prop: 'employee', placeholder: "请输入从业人员", showType: "input" },
|
||||
{ label: "承接日期", prop: 'acceptanceDate', placeholder: "请选择承接日期", showType: "date" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, plateNumber: '藏G.123456', repairItem: '换轮胎', driverLicense: '654644654654', employee: '李四', acceptanceDate: '2025/1/18 10:00:00', deliveryDate: '2025/1/20 10:00:00'},
|
||||
{id: 2, plateNumber: '藏G.123456', repairItem: '换轮胎', driverLicense: '654644654654', employee: '李四', acceptanceDate: '2025/1/18 10:00:00', deliveryDate: '2025/1/20 10:00:00'},
|
||||
{id: 3, plateNumber: '藏G.123456', repairItem: '换轮胎', driverLicense: '654644654654', employee: '李四', acceptanceDate: '2025/1/18 10:00:00', deliveryDate: '2025/1/20 10:00:00'},
|
||||
{id: 4, plateNumber: '藏G.123456', repairItem: '换轮胎', driverLicense: '654644654654', employee: '李四', acceptanceDate: '2025/1/18 10:00:00', deliveryDate: '2025/1/20 10:00:00'},
|
||||
{id: 5, plateNumber: '藏G.123456', repairItem: '换轮胎', driverLicense: '654644654654', employee: '李四', acceptanceDate: '2025/1/18 10:00:00', deliveryDate: '2025/1/20 10:00:00'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "车牌号", prop: "plateNumber" },
|
||||
{ label: "机动车修理项目", prop: "repairItem" },
|
||||
{ label: "车主驾驶证号", prop: "driverLicense" },
|
||||
{ label: "从业人员", prop: "employee" },
|
||||
{ label: "承接日期", prop: "acceptanceDate" },
|
||||
{ label: "交付日期", prop: "deliveryDate" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">典当业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="老于典当行"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当人姓名">
|
||||
<el-input v-model="listQuery.ddrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当人证件号码">
|
||||
<el-input v-model="listQuery.ddrzjhm" placeholder="511111111111111111"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当人联系电话">
|
||||
<el-input v-model="listQuery.ddrlxdh" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当日期">
|
||||
<el-input v-model="listQuery.ddrq" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="预赎日期">
|
||||
<el-input v-model="listQuery.ysrq" placeholder="2025/2/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="逾期时间数量">
|
||||
<el-input v-model="listQuery.yqsjsl" placeholder=""/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="典当业务信息管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'placeName', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "典当人姓名", prop: 'pawner', placeholder: "请输入典当人姓名", showType: "input" },
|
||||
{ label: "典当人身份证号", prop: 'pawnerIdCard', placeholder: "请输入典当人身份证号", showType: "input" },
|
||||
{ label: "典当人联系电话", prop: 'pawnerPhone', placeholder: "请输入典当人联系电话", showType: "input" },
|
||||
{ label: "所属辖区", prop: 'area', showType: "cascader", options: [], props: { multiple: false } },
|
||||
{ label: "典当日期", prop: 'pawnDate', showType: "daterange" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 2, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 3, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 4, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
{id: 5, placeName: '老王典当', area: '巴宜区药局路派出所', pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222', pawnDate: '2025/1/20 10:00:00'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "所属辖区", prop: "area" },
|
||||
{ label: "典当人姓名", prop: "pawner" },
|
||||
{ label: "典当人身份证号", prop: "pawnerIdCard" },
|
||||
{ label: "典当人联系电话", prop: "pawnerPhone" },
|
||||
{ label: "典当日期", prop: "pawnDate" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">典当物品信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当物品类别">
|
||||
<el-input v-model="listQuery.ddwplb" placeholder="贵金属"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当人姓名">
|
||||
<el-input v-model="listQuery.ddrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当人证件号码">
|
||||
<el-input v-model="listQuery.ddrzjhm" placeholder="511111111111111111"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当人联系电话">
|
||||
<el-input v-model="listQuery.ddrlxdh" placeholder="15222222222"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当物品名称">
|
||||
<el-input v-model="listQuery.ddwpmc" placeholder="100g金条"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当物品持有凭证">
|
||||
<el-input v-model="listQuery.cypz" placeholder="123"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="典当物品数量">
|
||||
<el-input v-model="listQuery.ddwpsl" placeholder="5"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="典当物品照片">
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
156
src/views/backOfficeSystem/Pawnbroking/ItemInformation/index.vue
Normal file
156
src/views/backOfficeSystem/Pawnbroking/ItemInformation/index.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="典当物品信息管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "物品名称", prop: 'itemName', placeholder: "请输入物品名称", showType: "input" },
|
||||
{ label: "物品类别", prop: 'itemType', placeholder: "请输入物品类别", showType: "input" },
|
||||
{ label: "持有凭证", prop: 'certificate', placeholder: "请输入持有凭证", showType: "input" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, placeName: '老王典当', itemName: '100g金条', itemType: '贵重金属', certificate: '123456', quantity: 5, pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222'},
|
||||
{id: 2, placeName: '老王典当', itemName: '100g金条', itemType: '贵重金属', certificate: '123456', quantity: 5, pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222'},
|
||||
{id: 3, placeName: '老王典当', itemName: '100g金条', itemType: '贵重金属', certificate: '123456', quantity: 5, pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222'},
|
||||
{id: 4, placeName: '老王典当', itemName: '100g金条', itemType: '贵重金属', certificate: '123456', quantity: 5, pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222'},
|
||||
{id: 5, placeName: '老王典当', itemName: '100g金条', itemType: '贵重金属', certificate: '123456', quantity: 5, pawner: '张三', pawnerIdCard: '511111111111111111', pawnerPhone: '15222222222'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "物品名称", prop: "itemName" },
|
||||
{ label: "物品类别", prop: "itemType" },
|
||||
{ label: "持有凭证", prop: "certificate" },
|
||||
{ label: "数量", prop: "quantity", width: 80 },
|
||||
{ label: "典当人", prop: "pawner" },
|
||||
{ label: "典当人证件号码", prop: "pawnerIdCard" },
|
||||
{ label: "典当人联系电话", prop: "pawnerPhone" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">典当业场所管理详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登记人姓名">
|
||||
<el-input v-model="listQuery.djrxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="时间">
|
||||
<el-input v-model="listQuery.sgfxsj" placeholder="2025/1/20 10:00:00"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="照片" >
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
168
src/views/backOfficeSystem/Pawnbroking/PopManagement/index.vue
Normal file
168
src/views/backOfficeSystem/Pawnbroking/PopManagement/index.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="典当业场所管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 事故照片 -->
|
||||
<template #accidentPhoto="{ row }">
|
||||
<el-image
|
||||
style="width: 50px; height: 50px"
|
||||
:src="row.accidentPhoto"
|
||||
:preview-src-list="[row.accidentPhoto]">
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转辖区</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'placeName', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "单位电话", prop: 'unitPhone', placeholder: "请输入单位电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'legalPerson', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人证件号码", prop: 'legalIdCard', placeholder: "请输入法人证件号码", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'legalPhone', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'operationStatus', placeholder: "请选择经营状况", showType: "select", options: [{label: '在业', value: '在业'}] },
|
||||
{ label: "所属辖区", prop: 'area', placeholder: "请选择所属辖区", showType: "cascader" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{id: 1, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 2, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 3, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 4, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
{id: 5, placeName: '老王典当', operationStatus: '在业', area: '巴宜区历保派出所', legalPerson: '张三四五六', legalIdCard: '511222222222222'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 280,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "经营状态", prop: "operationStatus" },
|
||||
{ label: "所属辖区", prop: "area" },
|
||||
{ label: "法人姓名", prop: "legalPerson" },
|
||||
{ label: "法人证件号码", prop: "legalIdCard" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }}</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="场所信息" name="basic">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所联系电话">
|
||||
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="经营状况">
|
||||
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所面积">
|
||||
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="开业日期">
|
||||
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="场所地址">
|
||||
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
|
||||
<div class="flex align-center">
|
||||
<div style="width: calc(100% - 176px);">
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人">
|
||||
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人证件号码">
|
||||
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="法定代表人联系电话">
|
||||
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法定代表人居住地址">
|
||||
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人">
|
||||
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人身份证号">
|
||||
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="场所负责人联系方式">
|
||||
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所负责人居住地址">
|
||||
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
<img height="130" src="@/assets/images/person.png" alt="">
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="机修场所备案编号">
|
||||
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所备案机构名称">
|
||||
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="备案登记日期">
|
||||
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="责任民警">
|
||||
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref('basic');
|
||||
const title = ref('废旧金属回收场所详情');
|
||||
const listQuery = ref({});
|
||||
|
||||
const areaOptions = ref([]); // 区域选项数据
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row,) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="废旧金属回收场所管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
<el-button size="small">从业人员</el-button>
|
||||
<el-button size="small">转区域</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "场所电话", prop: 'phone', placeholder: "请输入场所电话", showType: "input" },
|
||||
{ label: "法人姓名", prop: 'frxm', placeholder: "请输入法人姓名", showType: "input" },
|
||||
{ label: "法人证件号码", prop: 'frzjhm', placeholder: "请输入法人证件号码", showType: "input" },
|
||||
{ label: "法人联系电话", prop: 'frlxdh', placeholder: "请输入法人联系电话", showType: "input" },
|
||||
{ label: "经营状况", prop: 'jyzt', placeholder: "请选择经营状况", showType: "select", options: [{ label: '在业', value: '在业' }]},
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
{ label: "面积大小", prop: 'mj', placeholder: "请输入面积范围", showType: "defaultSlot" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
{name:'天上人间KTV',cslx:'KTV',jyzt:'在业',ssxq:'巴宜区纺织路派出所',frxm:'张三',frzjhm:'510183199656566652',frlxdh:'15882344902'},
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 250, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "经营状态", prop: "jyzt" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "法人姓名", prop: "frxm" },
|
||||
{ label: "法人证件号码", prop: "frzjhm" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">废旧金属回收业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.ywlsh" placeholder="01131213"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input v-model="listQuery.csmc" placeholder="老王废旧金属回收"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="回收人员姓名">
|
||||
<el-input v-model="listQuery.hsryxm" placeholder="王五"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="回收人证件号码">
|
||||
<el-input v-model="listQuery.hsrzjhm" placeholder="511111111111111111"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="出售人员姓名">
|
||||
<el-input v-model="listQuery.csryxm" placeholder="张三"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出售人证件号码">
|
||||
<el-input v-model="listQuery.csrzjhm" placeholder="511222222222222222"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="回收物品照片">
|
||||
<div class="image-group">
|
||||
<div class="image-item" v-for="(item, index) in listQuery.plateImages" :key="index">
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item label="回收物品清单描述">
|
||||
<el-input type="textarea" v-model="listQuery.wpqdms" :rows="4" placeholder="请输入回收物品清单描述"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const listQuery = ref({
|
||||
plateImages: [
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
{img:require('@/assets/images/person.png')},
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({init})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #F7FAFB;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #E3E7ED;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo{
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="废旧金属回收业务管理"/>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<div>
|
||||
<el-input-number v-model="queryFrom.xqy"></el-input-number>
|
||||
<span class="ml10 mr10" style="color: #000;">至</span>
|
||||
<el-input-number v-model="queryFrom.dqy"></el-input-number>
|
||||
</div>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)">详情</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所名称", prop: 'name', placeholder: "请输入场所名称", showType: "input" },
|
||||
{ label: "出售人姓名", prop: 'csrxm', placeholder: "请输入出售人姓名", showType: "input" },
|
||||
{ label: "出售人证件号码", prop: 'csrzjhm', placeholder: "请输入出售人证件号码", showType: "input" },
|
||||
{ label: "所属辖区", prop: 'ssxq', placeholder: "请选择所属辖区", showType: "department" },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
{name:'老王废旧金属回收',ssxq:'巴宜区纺织路派出所',csrxm:'张三',csrzjhm:'511222222222222222222',hsrxm:'王五',hsrzjhm:'511111111111111111',hswp:'废铁'},
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
showIndex: true
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "所属辖区", prop: "ssxq" },
|
||||
{ label: "出售人姓名", prop: "csrxm" },
|
||||
{ label: "出售人证件号码", prop: "csrzjhm" },
|
||||
{ label: "回收人姓名", prop: "hsrxm" },
|
||||
{ label: "回收人证件号码", prop: "hsrzjhm" },
|
||||
{ label: "回收物品", prop: "hswp" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="baxx-cnt">
|
||||
<div class="flex just-between align-center h24">
|
||||
<div class="texttext">保安信息</div>
|
||||
<el-button size="small" @click="handleDate('add',null)">新增</el-button>
|
||||
</div>
|
||||
<div >
|
||||
<MyTable
|
||||
:tableData="data.tableData"
|
||||
:tableColumn="data.tableColumn"
|
||||
:tableHeight="data.tableHeight"
|
||||
:key="data.keyCount"
|
||||
:tableConfiger="data.tableConfiger"
|
||||
:controlsWidth="data.controlsWidth"
|
||||
>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="handleDate('edit',row)">编辑</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button >
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="data.tableHeight"
|
||||
:pageConfiger="{
|
||||
...data.pageConfiger,
|
||||
total: data.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<el-dialog :title="title" width="700px" custom-class="zdy-bainfo" :model-value="visibleDialog" @close="closed">
|
||||
<el-form ref="baform" :model="dataQuery" :label-width="120" :rules="rules" :inline="true" label-position="right">
|
||||
<el-form-item style="width: 48%" prop="xm" label="姓名">
|
||||
<MOSTY.Other width="100%" clearable v-model="dataQuery.xm" placeholder="请输入姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="csrq" label="出生年月">
|
||||
<MOSTY.Date width="100%" v-model="dataQuery.csrq" :disabled-date="disabledDate" placeholder="选择出生年月"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfzh" label="身份证号">
|
||||
<MOSTY.Other width="100%" clearable v-model="dataQuery.sfzh" placeholder="请输入身份证号"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="lxfs" label="联系方式">
|
||||
<MOSTY.Other width="100%" clearable v-model="dataQuery.lxfs" placeholder="请输入联系方式"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" prop="bags" label="所属保安公司">
|
||||
<MOSTY.Other width="100%" clearable v-model="dataQuery.bags" placeholder="请输入所属保安公司"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="tc">
|
||||
<el-button type="primary" @click="submitOk" v-loading="loading">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { reactive, ref, onMounted,defineExpose,getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
dwid:String
|
||||
})
|
||||
const loading = ref(false)
|
||||
const visibleDialog = ref(false);
|
||||
// 设置不可选的日期
|
||||
const disabledDate = (time) => {
|
||||
return time.getTime() > Date.now();
|
||||
};
|
||||
const dataQuery = ref({})
|
||||
const rules = reactive({
|
||||
xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||||
csrq: [{ required: true, message: "请选择出生年月", trigger: ['change','blur'] }],
|
||||
bags: [{ required: true, message: "请输入所属保安公司", trigger: "blur" }],
|
||||
...rule.phoneRule({ validator: true ,require: true }, "lxfs"), // 是否必填 是否进行校验
|
||||
...rule.identityCardRule({ validator: true ,require: true },'sfzh'), //身份证校验
|
||||
})
|
||||
const baform = ref()
|
||||
const data = reactive({
|
||||
tableData: [], //表格数据
|
||||
tableHeight: 380,
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageNum: 1
|
||||
}, //分页
|
||||
controlsWidth: 140, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
||||
{ label: "出生年月", prop: "csrq", showOverflowTooltip: true },
|
||||
{ label: "身份证号", prop: "sfzh", showOverflowTooltip: true },
|
||||
{ label: "联系方式", prop: "lxfs", showOverflowTooltip: true },
|
||||
{ label: "所属保安公司", prop: "bags", showOverflowTooltip: true }
|
||||
]
|
||||
});
|
||||
|
||||
const title = ref('')
|
||||
// 获取列表
|
||||
const getList = () =>{
|
||||
data.tableConfiger.loading = true;
|
||||
let params = { ...data.pageConfiger };
|
||||
params.dwid = props.dwid;
|
||||
qcckPost(params,'/mosty-lzcj/tbDwBary/queryList').then(res=>{
|
||||
data.tableData = res.records || [];
|
||||
data.total = res.total;
|
||||
data.tableConfiger.loading = false;
|
||||
}).catch(()=>{ data.tableConfiger.loading = false; })
|
||||
}
|
||||
|
||||
// 新增 - 编辑
|
||||
const handleDate = (type,row) =>{
|
||||
title.value = type == 'add' ? '新增保安人员' :'编辑保安人员'
|
||||
visibleDialog .value = true;
|
||||
if(type == 'edit') dataQuery.value = JSON.parse(JSON.stringify(row))
|
||||
}
|
||||
// 删除
|
||||
const delDictItem = (id) =>{
|
||||
proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
qcckPost(id,'/mosty-lzcj/tbDwBary/delete').then(()=>{
|
||||
proxy.$message({ type: "success", message: "删除成功" });
|
||||
getList();
|
||||
})
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 提交
|
||||
const submitOk = () =>{
|
||||
baform.value.validate(valid=>{
|
||||
if(!valid) return;
|
||||
loading.value = true;
|
||||
let url = title.value == '新增保安人员' ? '/mosty-lzcj/tbDwBary/insert' :'/mosty-lzcj/tbDwBary/update'
|
||||
let text = title.value == '新增保安人员' ? '新增':'编辑';
|
||||
let params = {...dataQuery.value};
|
||||
params.dwid = props.dwid;
|
||||
qcckPost(params, url).then((res) => {
|
||||
proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
closed()
|
||||
loading.value = false;
|
||||
getList()
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
const closed = () =>{
|
||||
visibleDialog.value = false;
|
||||
dataQuery.value = {}
|
||||
};
|
||||
const changeNo = (val) =>{
|
||||
data.pageConfiger.pageNum = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
data.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
defineExpose({getList});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.baxx-cnt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #133466;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.texttext {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
width: 70px;
|
||||
height: 4px;
|
||||
background: linear-gradient(to right, rgb(10, 103, 126) 0%, blue 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.zdy-bainfo{
|
||||
.el-form--inline{
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,151 @@
|
||||
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">{{ title }} — {{modelLx}} </span>
|
||||
<div>
|
||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="elform" :model="listQuery" :label-width="140" :rules="rules" :inline="true" label-position="right">
|
||||
<!-- 学校 -->
|
||||
<School v-model:listQuery="listQuery" v-if="modelLx == '学校'" :dic="props.dic"></School>
|
||||
<!-- 医院 -->
|
||||
<Hospital v-model:listQuery="listQuery" v-if="modelLx == '医院'" :dic="props.dic"></Hospital>
|
||||
<!-- 娱乐场所 -->
|
||||
<Ylcs v-model:listQuery="listQuery" v-if="modelLx == '娱乐场所'" :dic="props.dic"></Ylcs>
|
||||
<!-- 民爆库房 -->
|
||||
<Mbkf v-model:listQuery="listQuery" v-if="modelLx == '民爆库房'" :dic="props.dic"></Mbkf>
|
||||
<!-- 保安信息 -->
|
||||
<Baxx v-if="title == '编辑'" ref="editpeo" :dwid="listQuery.id"></Baxx>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import School from './school.vue'
|
||||
import Hospital from './hospital.vue'
|
||||
import Ylcs from './ylcs.vue'
|
||||
import Baxx from './baxx.vue'
|
||||
import Mbkf from './mbkf.vue'
|
||||
import { ref,defineExpose, reactive, onMounted,defineEmits,getCurrentInstance, nextTick } from 'vue';
|
||||
const emit = defineEmits(["updateDate"]);
|
||||
const props = defineProps({
|
||||
dic:Object
|
||||
})
|
||||
const { proxy } = getCurrentInstance();
|
||||
const dialogForm = ref(false) //弹窗
|
||||
const listQuery = ref({}) //表单
|
||||
const loading = ref(false)
|
||||
const elform = ref()
|
||||
const title = ref('')
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
||||
xxlx: [{ required: true, message: "请选择学校类型", trigger: ['change','blur'] }],
|
||||
xxrs: [{ required: true, message: "请输入学校人数", trigger: ['change','blur'] }],
|
||||
pbbbs: [{ required: true, message: "请输入要求配置保安人数", trigger: ['change','blur'] }],
|
||||
zpbbs: [{ required: true, message: "请输入自聘保安数", trigger: ['change','blur'] }],
|
||||
sfbbs: [{ required: true, message: "请输三方保安数", trigger: ['change','blur'] }],
|
||||
sfjs: [{ required: true, message: "是否寄宿制学校", trigger: "change" }],
|
||||
xzxm: [{ required: true, message: "请输入校长姓名", trigger: "blur" }],
|
||||
frxm: [{ required: true, message: "请输入法人姓名", trigger: "blur" }],
|
||||
cws: [{ required: true, message: "请输入床位数", trigger: ['change','blur'] }],
|
||||
yyrs: [{ required: true, message: "请输入医院人数", trigger: ['change','blur'] }],
|
||||
yyrll: [{ required: true, message: "请输入医院人流量", trigger: ['change','blur'] }],
|
||||
mj: [{ required: true, message: "请输入面积", trigger: ['change','blur'] }],
|
||||
kfsyr: [{ required: true, message: "请输入库房所有人", trigger: ['change','blur'] }],
|
||||
kfUser: [{ required: true, message: "请输入库房使用人", trigger: ['change','blur'] }],
|
||||
kry: [{ required: true, message: "请输入库容量", trigger: ['change','blur'] }],
|
||||
sfdbs: [{ required: true, message: "请输入是否导爆索", trigger: ['change','blur'] }],
|
||||
...rule.phoneRule({ validator: true ,require: true }, "lxfs"), // 是否必填 是否进行校验
|
||||
...rule.phoneRule({ validator: true ,require: true }, "syrLxfs"), // 是否必填 是否进行校验
|
||||
...rule.phoneRule({ validator: true ,require: true }, "userLxfs"), // 是否必填 是否进行校验
|
||||
...rule.phoneRule({ validator: true ,require: true }, "lxdh"), // 是否必填 是否进行校验
|
||||
...rule.identityCardRule({ validator: true ,require: true },'sfzh'), //身份证校验
|
||||
...rule.phoneRule({ validator: true }, "mjlxdh"), // 是否必填 是否进行校验
|
||||
})
|
||||
const modelLx = ref('学校')
|
||||
const editpeo = ref()
|
||||
onMounted(()=>{})
|
||||
|
||||
// 初始化数据
|
||||
const init = (type,row,lx)=> {
|
||||
dialogForm.value = true;
|
||||
modelLx.value = lx;
|
||||
title.value = row ? '编辑':'新增'
|
||||
if(row) getDataById(row.id)
|
||||
}
|
||||
// 根据id查询详情
|
||||
const getDataById = (id)=>{
|
||||
let url = ''
|
||||
switch(modelLx.value){
|
||||
case '学校':
|
||||
url = '/mosty-lzcj/tbDwXx/selectById/'
|
||||
break;
|
||||
case '医院':
|
||||
url = '/mosty-lzcj/tbDwYy/selectById'
|
||||
break;
|
||||
case '娱乐场所':
|
||||
url = '/mosty-lzcj/TbDwYlth/selectById'
|
||||
break;
|
||||
case '民爆库房':
|
||||
url = '/mosty-lzcj/tbDwMbkf/selectById';
|
||||
break;
|
||||
}
|
||||
qcckGet({id}, url).then(res=> {
|
||||
listQuery.value = res;
|
||||
nextTick(()=>{editpeo.value.getList()})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 提交
|
||||
const submit = ()=>{
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
loading.value = true;
|
||||
let params = { ...listQuery.value}
|
||||
let url = ''
|
||||
params.type = modelLx.value;
|
||||
switch(modelLx.value){
|
||||
case '学校':
|
||||
url = title.value == '新增' ? '/mosty-lzcj/tbDwXx/insert' :'/mosty-lzcj/tbDwXx/update'
|
||||
break;
|
||||
case '医院':
|
||||
url = title.value == '新增' ? '/mosty-lzcj/tbDwYy/insert' :'/mosty-lzcj/tbDwYy/update'
|
||||
break;
|
||||
case '娱乐场所':
|
||||
url = title.value == '新增' ? '/mosty-lzcj/TbDwYlth/insert' :'/mosty-lzcj/TbDwYlth/update'
|
||||
break;
|
||||
case '民爆库房':
|
||||
url = title.value == '新增' ? '/mosty-lzcj/tbDwMbkf/insert' :'/mosty-lzcj/tbDwMbkf/update'
|
||||
break;
|
||||
}
|
||||
qcckPost(params, url).then((res) => {
|
||||
proxy.$message({ type: "success", message: title.value+'成功'});
|
||||
close()
|
||||
emit("updateDate",modelLx.value);
|
||||
}).catch(()=>{
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
// 关闭
|
||||
const close = ()=>{
|
||||
listQuery.value = {}
|
||||
dialogForm.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
defineExpose({init});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import "~@/assets/css/layout.scss";
|
||||
@import "~@/assets/css/element-plus.scss";
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2025-03-20 17:57:11
|
||||
* @LastEditTime: 2025-03-21 09:30:23
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \lz\src\views\backOfficeSystem\editPassword\components\hospital.vue
|
||||
-->
|
||||
<template>
|
||||
|
||||
<el-form-item style="width: 48%" prop="name" label="医院名称">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.name" placeholder="请输入医院名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="frxm" label="法人姓名">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.frxm" placeholder="请输入法人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="lxfs" label="法联系方式">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.lxfs" placeholder="请输入法人法联系方式"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="cws" label="床位数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.cws" placeholder="请输入床位数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="yyrs" label="医院人数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.yyrs" placeholder="请输入医院人数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="yyrll" label="医院人流量">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.yyrll" placeholder="请输入医院人流量" type="Number" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="pbbbs" label="要求配备保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.pbbbs" placeholder="请输入要求配备保安数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="zpbbs" label="自聘保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.zpbbs" placeholder="请输入自聘保安数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfbbs" label="第三方保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.sfbbs" placeholder="请输入第三方保安数" type="Number" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
const props = defineProps({
|
||||
listQuery:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
dic:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2025-03-21 09:35:01
|
||||
* @LastEditTime: 2025-03-21 09:40:46
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \lz\src\views\backOfficeSystem\editPassword\components\mbkf.vue
|
||||
-->
|
||||
<template>
|
||||
|
||||
<el-form-item style="width: 48%" prop="name" label="库房名称">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.name" placeholder="请输入库房名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="kfsyr" label="库房所有人">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.kfsyr" placeholder="请输入库房所有人"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="syrLxfs" label="所有人联系方式">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.syrLxfs" placeholder="请输入所有人联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="kfUser" label="库房使用人">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.kfUser" placeholder="请输入库房使用人" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="userLxfs" label="使用人联系方式">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.userLxfs" placeholder="请输入使用人联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="kry" label="库容量">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.kry" type="Number" placeholder="请输入库容量" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="sfdbs" label="是否导爆索">
|
||||
<MOSTY.Select width="100%" clearable v-model="listQuery.sfdbs" :dictEnum="props.dic.sf" placeholder="请选择是否寄宿制学校"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 48%" prop="pbbbs" label="要求配置保安人数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.pbbbs" placeholder="请输入要求配置保安人数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="zpbbs" label="自聘保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.zpbbs" placeholder="请输入自聘保安数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfbbs" label="第三方保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.sfbbs" placeholder="请输入第三方保安数" type="Number" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
const props = defineProps({
|
||||
listQuery:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
dic:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<el-form-item style="width: 48%" prop="xxlx" label="学校类型">
|
||||
<MOSTY.Select width="100%" clearable v-model="listQuery.xxlx" :dictEnum="props.dic.xxlx" placeholder="请选择学校类型"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="name" label="学校名称">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.name" placeholder="请输入学校名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xxrs" label="学校人数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.xxrs" placeholder="请输入学校人数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfjs" label="寄宿制学校">
|
||||
<MOSTY.Select width="100%" clearable v-model="listQuery.sfjs" :dictEnum="props.dic.sf" placeholder="请选择是否寄宿制学校"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="jsrs" label="寄宿人数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.jsrs" placeholder="请输入寄宿人数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="xzxm" label="校长姓名">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.xzxm" placeholder="请输入校长姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="lxfs" label="校长联系方式">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.lxfs" placeholder="请输入校长联系方式"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="pbbbs" label="要求配置保安人数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.pbbbs" placeholder="请输入要求配置保安人数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="zpbbs" label="自聘保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.zpbbs" placeholder="请输入自聘保安数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfbbs" label="第三方保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.sfbbs" placeholder="请输入第三方保安数" type="Number" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
const props = defineProps({
|
||||
listQuery:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
dic:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2025-03-20 17:57:11
|
||||
* @LastEditTime: 2025-03-21 09:34:27
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \lz\src\views\backOfficeSystem\editPassword\components\hospital.vue
|
||||
-->
|
||||
<template>
|
||||
|
||||
<el-form-item style="width: 48%" prop="name" label="场所名称">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.name" placeholder="请输入场所名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="frxm" label="法人姓名">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.frxm" placeholder="请输入法人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="lxfs" label="法联系方式">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.lxfs" placeholder="请输入法人法联系方式"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="mj" label="面积">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.mj" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="pbbbs" label="要求配备保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.pbbbs" placeholder="请输入要求配备保安数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="zpbbs" label="自聘保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.zpbbs" placeholder="请输入自聘保安数" type="Number" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 48%" prop="sfbbs" label="第三方保安数">
|
||||
<MOSTY.Other width="100%" clearable v-model="listQuery.sfbbs" placeholder="请输入第三方保安数" type="Number" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import * as rule from "@/utils/rules.js";
|
||||
const props = defineProps({
|
||||
listQuery:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
dic:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
274
src/views/backOfficeSystem/SecurityInformation/index.vue
Normal file
274
src/views/backOfficeSystem/SecurityInformation/index.vue
Normal file
@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="单位保安信息">
|
||||
<el-button type="primary" @click="addEdit('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle">新增</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
|
||||
<template #defaultSlot>
|
||||
<el-select placeholder="请选择类型" v-model="chooseType" @change="handleType">
|
||||
<el-option v-for="it in list.chooseList" :key="it" :value="it" :label="it"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<template #sfjs="{ row }">
|
||||
<DictTag :value="row.sfjs" :options="list.sf" />
|
||||
</template>
|
||||
<template #xxlx="{ row }">
|
||||
<DictTag :value="row.xxlx" :options="list.xxlx" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('edit', row)">编辑</el-button>
|
||||
<el-button size="small" @click="delDictItem([row.id])" type="danger">删除</el-button>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<EditAddForm ref="detailDiloag" :dic="{xxlx:list.xxlx,sf:list.sf}" @updateDate="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const qypzDialog = ref();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
const chooseType = ref('学校') //选择的类型
|
||||
const list = reactive({
|
||||
chooseList :['学校','医院','娱乐场所','民爆库房'],
|
||||
xxlx:[
|
||||
{label:'职业学校',value:'01'},
|
||||
{label:'大专',value:'02'},
|
||||
{label:'本科',value:'03'},
|
||||
{label:'研究生',value:'04'},
|
||||
{label:'博士',value:'05'},
|
||||
],
|
||||
sf:[
|
||||
{label:'是',value:'1'},
|
||||
{label:'否',value:'0'},
|
||||
],
|
||||
})
|
||||
const searchConfiger = ref([
|
||||
{ label: "场所" ,placeholder: "请输入姓名", showType: "defaultSlot" },
|
||||
{ label: "学校名称",prop:'name',placeholder: "请输入学校名称", showType: "input",},
|
||||
{ label: "学校类型",prop:'xxlx' ,placeholder: "请选择学校类型", showType: "select",options:list.xxlx },
|
||||
]);
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
controlsWidth: 160, //操作栏宽度
|
||||
tableColumn: [
|
||||
{ label: "学校名称", prop: "name" },
|
||||
{ label: "学校人数", prop: "xxrs" },
|
||||
{ label: "是否寄宿学校", prop: "sfjs",showSolt:true},
|
||||
{ label: "学校类型", prop: "xxlx",showSolt:true},
|
||||
{ label: "校长", prop: "xzxm"},
|
||||
{ label: "校长联系方式", prop: "lxfs" },
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
getList(chooseType.value)
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
searchConfiger.value = searchConfiger.value.slice(0,1);
|
||||
let arr = [],tableColumn = [];
|
||||
switch(val){
|
||||
case '学校':
|
||||
arr = [
|
||||
{ label: "学校名称" ,prop:'name', placeholder: "请输入学校名称", showType: "input" },
|
||||
{ label: "学校类型" ,prop:'xxlx', placeholder: "请选择学校类型", showType: "select",options:list.xxlx },
|
||||
]
|
||||
tableColumn = [
|
||||
{ label: "学校名称", prop: "name" },
|
||||
{ label: "学校人数", prop: "xxrs" },
|
||||
{ label: "是否寄宿学校", prop: "sfjs",showSolt:true},
|
||||
{ label: "学校类型", prop: "xxlx",showSolt:true},
|
||||
{ label: "校长", prop: "xzxm"},
|
||||
{ label: "校长联系方式", prop: "lxfs" },
|
||||
{ label: "要求配备保安数", prop: "pbbbs" },
|
||||
{ label: "自聘保安数", prop: "zpbbs" },
|
||||
{ label: "第三方保安数", prop: "sfbbs" },
|
||||
]
|
||||
break;
|
||||
case '医院':
|
||||
arr = [{ label: "医院名称" ,prop:'name',placeholder: "请输入医院名称", showType: "input" }];
|
||||
tableColumn = [
|
||||
{ label: "医院名称", prop: "name" },
|
||||
{ label: "医院法人", prop: "frxm" },
|
||||
{ label: "法人联系方式", prop: "lxfs" },
|
||||
{ label: "床位数", prop: "cws" },
|
||||
{ label: "医院人数", prop: "yyrs" },
|
||||
{ label: "医院人流量", prop: "yyrll" },
|
||||
{ label: "要求配备保安数", prop: "pbbbs" },
|
||||
{ label: "自聘保安数", prop: "zpbbs" },
|
||||
{ label: "第三方保安数", prop: "sfbbs" },
|
||||
]
|
||||
break;
|
||||
case '娱乐场所':
|
||||
arr = [{ label: "娱乐场所" ,prop:'name',placeholder: "请输娱乐场所名称", showType: "input" }]
|
||||
tableColumn = [
|
||||
{ label: "场所名称", prop: "name" },
|
||||
{ label: "法人", prop: "frxm" },
|
||||
{ label: "法人联系方式", prop: "lxfs" },
|
||||
{ label: "面积", prop: "mj" },
|
||||
{ label: "要求配备保安数", prop: "pbbbs" },
|
||||
{ label: "自聘保安数", prop: "zpbbs" },
|
||||
{ label: "第三方保安数", prop: "sfbbs" },
|
||||
]
|
||||
break;
|
||||
case '民爆库房':
|
||||
arr = [{ label: "民爆库房" ,prop:'bmkf',placeholder: "请输民爆库房名称", showType: "input" }]
|
||||
tableColumn = [
|
||||
{ label: "库房名称", prop: "name" },
|
||||
{ label: "库房所有人", prop: "kfsyr" },
|
||||
{ label: "所有人联系方式", prop: "syrLxfs" },
|
||||
{ label: "库房使用人", prop: "kfUser" },
|
||||
{ label: "使用人联系方式", prop: "userLxfs" },
|
||||
{ label: "库容量", prop: "kry" },
|
||||
{ label: "要求配备保安数", prop: "pbbbs" },
|
||||
{ label: "自聘保安数", prop: "zpbbs" },
|
||||
{ label: "第三方保安数", prop: "sfbbs" },
|
||||
]
|
||||
break;
|
||||
}
|
||||
searchConfiger.value = searchConfiger.value.concat(arr);
|
||||
pageData.tableColumn = tableColumn;
|
||||
getList(chooseType.value)
|
||||
}
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList(chooseType.value)
|
||||
}
|
||||
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList(chooseType.value)
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList(chooseType.value)
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) =>{
|
||||
let url = ''
|
||||
switch(val){
|
||||
case '学校':
|
||||
url = '/mosty-lzcj/tbDwXx/queryList';
|
||||
break;
|
||||
case '医院':
|
||||
url = '/mosty-lzcj/tbDwYy/queryList';
|
||||
break;
|
||||
case '娱乐场所':
|
||||
url = '/mosty-lzcj/TbDwYlth/queryList';
|
||||
break;
|
||||
case '民爆库房':
|
||||
url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
break;
|
||||
}
|
||||
pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger,...queryFrom.value };
|
||||
qcckPost(data,url).then(res=>{
|
||||
pageData.tableData = res.records || [];
|
||||
pageData.total = res.total;
|
||||
pageData.tableConfiger.loading = false;
|
||||
}).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
}
|
||||
// 删除
|
||||
const delDictItem = (ids) =>{
|
||||
let url = ''
|
||||
switch(chooseType.value){
|
||||
case '学校':
|
||||
url = '/mosty-lzcj/tbDwXx/delete';
|
||||
break;
|
||||
case '医院':
|
||||
url = '/mosty-lzcj/tbDwYy/delete';
|
||||
break;
|
||||
case '娱乐场所':
|
||||
url = '/mosty-lzcj/TbDwYlth/delete';
|
||||
break;
|
||||
case '民爆库房':
|
||||
url = '/mosty-lzcj/tbDwMbkf/delete';
|
||||
break;
|
||||
}
|
||||
// proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
|
||||
// qcckPost(ids,url).then(()=>{
|
||||
// proxy.$message({ type: "success", message: "删除成功" });
|
||||
// getList(chooseType.value);
|
||||
// })
|
||||
// }).catch(() => {});
|
||||
}
|
||||
|
||||
// 新增
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row,chooseType.value);
|
||||
};
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">交易物品信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.businessNo" placeholder="011022" />
|
||||
</el-form-item>
|
||||
<el-form-item label="交易物品名称">
|
||||
<el-input
|
||||
v-model="listQuery.goodsName"
|
||||
placeholder="2025/1/20 10:00:00"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="金额">
|
||||
<el-input
|
||||
v-model="listQuery.goodsPrice"
|
||||
placeholder="2025/1/20 10:00:00"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="物品相片">
|
||||
<div class="image-group">
|
||||
<div
|
||||
class="image-item"
|
||||
v-for="(item, index) in listQuery.goodsImages"
|
||||
:key="index"
|
||||
>
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="简单描述">
|
||||
<el-input v-model="listQuery.goodsDesc" placeholder="" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref("basic");
|
||||
const title = ref("详情");
|
||||
const listQuery = ref({
|
||||
businessNo: "",
|
||||
goodsName: "",
|
||||
goodsPrice: "",
|
||||
goodsDesc: "",
|
||||
goodsImages: [
|
||||
{ img: require("@/assets/images/person.png") },
|
||||
{ img: require("@/assets/images/person.png") },
|
||||
{ img: require("@/assets/images/person.png") }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
222
src/views/backOfficeSystem/ThriftTrading/TradeTtems/index.vue
Normal file
222
src/views/backOfficeSystem/ThriftTrading/TradeTtems/index.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="交易物品信息管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 抓拍图片 -->
|
||||
<template #goodsName="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.goodsName"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.goodsName]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 人像图片 -->
|
||||
<template #goodsImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.goodsImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.goodsImage]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "业务流水号码",
|
||||
prop: "businessNo",
|
||||
placeholder: "请输入业务流水号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "交易物品名称",
|
||||
prop: "goodsName",
|
||||
placeholder: "请输入交易物品名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
businessNo: "123456789",
|
||||
goodsName: "华为手机",
|
||||
goodsImage: "",
|
||||
goodsDesc: "2025/1/20 10:00:00",
|
||||
goodsPrice: "1000"
|
||||
},
|
||||
{
|
||||
businessNo: "123456789",
|
||||
goodsName: "华为手机",
|
||||
goodsImage: "",
|
||||
goodsDesc: "2025/1/20 10:00:00",
|
||||
goodsPrice: "1000"
|
||||
},
|
||||
{
|
||||
businessNo: "123456789",
|
||||
goodsName: "华为手机",
|
||||
goodsImage: "",
|
||||
goodsDesc: "2025/1/20 10:00:00",
|
||||
goodsPrice: "1000"
|
||||
},
|
||||
{
|
||||
businessNo: "123456789",
|
||||
goodsName: "华为手机",
|
||||
goodsImage: "",
|
||||
goodsDesc: "2025/1/20 10:00:00",
|
||||
goodsPrice: "1000"
|
||||
},
|
||||
{
|
||||
businessNo: "123456789",
|
||||
goodsName: "华为手机",
|
||||
goodsImage: "",
|
||||
goodsDesc: "2025/1/20 10:00:00",
|
||||
goodsPrice: "1000"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "业务流水号码", prop: "businessNo" },
|
||||
{ label: "交易物品", prop: "goodsName" },
|
||||
{ label: "物品相片", prop: "goodsImage", slot: true },
|
||||
{ label: "简单描述", prop: "goodsDesc" },
|
||||
{ label: "金额", prop: "goodsPrice" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="dialog" v-if="dialogForm">
|
||||
<div class="head_box">
|
||||
<span class="title">旧货交易业务信息详情</span>
|
||||
<div>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||||
<div class="form-row">
|
||||
<el-form-item label="业务流水号码">
|
||||
<el-input v-model="listQuery.businessNo" placeholder="011022" />
|
||||
</el-form-item>
|
||||
<el-form-item label="场所名称">
|
||||
<el-input
|
||||
v-model="listQuery.placeName"
|
||||
placeholder="2025/1/20 10:00:00"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="所有人姓名">
|
||||
<el-input v-model="listQuery.sellerName" placeholder="011022" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所有人证件号码">
|
||||
<el-input v-model="listQuery.sellerId" placeholder="1221212" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="购买人姓名">
|
||||
<el-input v-model="listQuery.buyerName" placeholder="011022" />
|
||||
</el-form-item>
|
||||
<el-form-item label="购买人证件号码">
|
||||
<el-input v-model="listQuery.buyerId" placeholder="5100XXXXXXX" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="交易日期">
|
||||
<el-input
|
||||
v-model="listQuery.friendshipTime"
|
||||
placeholder="2025/1/20 10:00:00"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="交易物品持有凭证">
|
||||
<div class="image-group">
|
||||
<div
|
||||
class="image-item"
|
||||
v-for="(item, index) in listQuery.certificateImage"
|
||||
:key="index"
|
||||
>
|
||||
<el-image :src="item.img" fit="cover"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref("basic");
|
||||
const title = ref("详情");
|
||||
const listQuery = ref({
|
||||
businessNo: "",
|
||||
placeName: "",
|
||||
certificate: "",
|
||||
sellerName: "",
|
||||
sellerId: "",
|
||||
buyerName: "",
|
||||
buyerId: "",
|
||||
friendshipTime: "",
|
||||
certificateImage: [
|
||||
{ img: require("@/assets/images/person.png") },
|
||||
{ img: require("@/assets/images/person.png") },
|
||||
{ img: require("@/assets/images/person.png") }
|
||||
]
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ init });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
background-color: #f7fafb;
|
||||
padding: 0px 8px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
border: 1px solid #e3e7ed;
|
||||
}
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.image-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.image-item {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 1px solid #dcdfe6;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-group {
|
||||
display: flex;
|
||||
// gap: 20px;
|
||||
|
||||
.el-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
border-radius: 0;
|
||||
color: #777575;
|
||||
}
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="旧货交易业务信息管理" />
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search
|
||||
:searchArr="searchConfiger"
|
||||
@submit="onSearch"
|
||||
:key="pageData.keyCount"
|
||||
/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<!-- 抓拍图片 -->
|
||||
<template #certificate="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.certificate"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.certificate]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 人像图片 -->
|
||||
<template #sellerName="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.sellerName"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.sellerName]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 车牌图片 -->
|
||||
<template #licensePlateImage="{ row }">
|
||||
<el-image
|
||||
style="width: 100px; height: 60px"
|
||||
:src="row.licensePlateImage"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.licensePlateImage]"
|
||||
>
|
||||
</el-image>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-button size="small" @click="addEdit('detail', row)"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<DetailForm ref="detailDiloag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import DetailForm from "./components/detailForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const detailDiloag = ref();
|
||||
const searchBox = ref(); //搜索框
|
||||
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "业务流水号码",
|
||||
prop: "placeName",
|
||||
placeholder: "请输入业务流水号码",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "交易物品名称",
|
||||
prop: "certificate",
|
||||
placeholder: "请输入交易物品名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
placeName: "老王废旧金属回收",
|
||||
certificate: "pz123456",
|
||||
sellerName: "张三",
|
||||
sellerId: "5102222222222222",
|
||||
buyerName: "王五",
|
||||
buyerId: "5102222222222222",
|
||||
friendshipTime: "2025/1/20 10:00:00"
|
||||
},
|
||||
{
|
||||
placeName: "老王废旧金属回收",
|
||||
certificate: "pz123456",
|
||||
sellerName: "张三",
|
||||
sellerId: "5102222222222222",
|
||||
buyerName: "王五",
|
||||
buyerId: "5102222222222222",
|
||||
friendshipTime: "2025/1/20 10:00:00"
|
||||
},
|
||||
{
|
||||
placeName: "老王废旧金属回收",
|
||||
certificate: "pz123456",
|
||||
sellerName: "张三",
|
||||
sellerId: "5102222222222222",
|
||||
buyerName: "王五",
|
||||
buyerId: "5102222222222222",
|
||||
friendshipTime: "2025/1/20 10:00:00"
|
||||
},
|
||||
{
|
||||
placeName: "老王废旧金属回收",
|
||||
certificate: "pz123456",
|
||||
sellerName: "张三",
|
||||
sellerId: "5102222222222222",
|
||||
buyerName: "王五",
|
||||
buyerId: "5102222222222222",
|
||||
friendshipTime: "2025/1/20 10:00:00"
|
||||
},
|
||||
{
|
||||
placeName: "老王废旧金属回收",
|
||||
certificate: "pz123456",
|
||||
sellerName: "张三",
|
||||
sellerId: "5102222222222222",
|
||||
buyerName: "王五",
|
||||
buyerId: "5102222222222222",
|
||||
friendshipTime: "2025/1/20 10:00:00"
|
||||
}
|
||||
],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 120,
|
||||
tableColumn: [
|
||||
{ label: "场所名称", prop: "placeName" },
|
||||
{ label: "交易物品持有凭证", prop: "certificate" },
|
||||
{ label: "所有人姓名", prop: "sellerName" },
|
||||
{ label: "所有人证件号", prop: "sellerId" },
|
||||
{ label: "购买人姓名", prop: "buyerName" },
|
||||
{ label: "购买人证件号", prop: "buyerId" },
|
||||
{ label: "交意日期", prop: "friendshipTime" }
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
tabHeightFn();
|
||||
});
|
||||
|
||||
//选择类型
|
||||
const handleType = (val) => {
|
||||
pageData.keyCount++;
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = { ...val };
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 获取列表
|
||||
const getList = (val) => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
let data = { ...pageData.pageConfiger, ...queryFrom.value };
|
||||
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
|
||||
// qcckPost(data,url).then(res=>{
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
|
||||
};
|
||||
|
||||
// 详情
|
||||
const addEdit = (type, row) => {
|
||||
detailDiloag.value.init(type, row);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight =
|
||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user