Compare commits
No commits in common. "3bd42ef2a76b74b945e9fbcae360763e05aef58b" and "283a239fde041a9147fc5ef54298e3fcc8fa74a2" have entirely different histories.
3bd42ef2a7
...
283a239fde
@ -12,6 +12,7 @@
|
||||
v-bind="componentProps"
|
||||
@vue:mounted="handleComponentMount"
|
||||
/>
|
||||
<slot></slot>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import MyDrawer from './index.vue'
|
||||
|
||||
export default MyDrawer
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
:title="title"
|
||||
:size="size"
|
||||
:direction="direction"
|
||||
destroy-on-close
|
||||
>
|
||||
<component
|
||||
v-if="dynamicComponent"
|
||||
:is="dynamicComponent"
|
||||
ref="dynamicComponentRef"
|
||||
v-bind="componentProps"
|
||||
@vue:mounted="handleComponentMount"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
<el-button type="primary" @click="onConfirm">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, markRaw } from "vue";
|
||||
|
||||
const dynamicComponentRef = ref(null);
|
||||
defineExpose({
|
||||
dynamicComponentRef,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "50%",
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: "rtl", // rtl/ltr/ttb/btt
|
||||
validator: (v) => ["rtl", "ltr", "ttb", "btt"].includes(v),
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
dynamicComponent: {
|
||||
type: [Object, Function],
|
||||
default: null,
|
||||
},
|
||||
componentProps: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
onCancel: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:visible"]);
|
||||
|
||||
// 状态同步
|
||||
const normalizedComponent = computed(() =>
|
||||
props.dynamicComponent ? markRaw(props.dynamicComponent) : null
|
||||
);
|
||||
|
||||
// 关闭处理
|
||||
const handleClose = () => {
|
||||
emit("update:visible", false);
|
||||
};
|
||||
|
||||
// 确认/取消时自动关闭
|
||||
const onConfirm = () => {
|
||||
props.onConfirm();
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
props.onCancel();
|
||||
handleClose();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -6,24 +6,49 @@
|
||||
label-width="150px"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
||||
>
|
||||
<el-form-item label="所属服务站:">
|
||||
<span>{{ form.material.yhzmc}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="物资名称:">
|
||||
<el-input v-model="form.material.wzmc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量:">
|
||||
<el-input v-model="form.material.sl"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位:">
|
||||
<el-select v-model="form.material.dw">
|
||||
<el-option label="个" value="个"></el-option>
|
||||
<el-option label="包" value="包"></el-option>
|
||||
<el-option label="盒" value="盒"></el-option>
|
||||
<el-option label="桶" value="桶"></el-option>
|
||||
<el-option label="箱" value="箱"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物资名称:">
|
||||
<el-input v-model="form.wzmc" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入库日期:">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="form.rkrq"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="入库单位:">
|
||||
<el-input v-model="form.rkdw" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数量:">
|
||||
<el-input-number v-model="form.sl" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位:">
|
||||
<el-input v-model="form.dw" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="存放地点:">
|
||||
<el-input v-model="form.cfdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人:">
|
||||
<el-input v-model="form.fzr" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话:">
|
||||
<el-input v-model="form.lxdh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="区县名称:">
|
||||
<el-input v-model="form.qxmc" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,68 +1,52 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-card shadow="hover">
|
||||
<el-form
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-descriptions title="基础信息" column="1">
|
||||
<el-descriptions-item label="物资名称: ">{{
|
||||
detailData.material?.wzmc
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="余量: ">{{
|
||||
detailData.material?.ye
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属服务站: ">{{
|
||||
detailData.material?.yhzMc
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注: ">{{
|
||||
detailData.material?.remark
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-form-item label="物资名称:">
|
||||
<el-input disabled v-model="detailData.wzmc" />
|
||||
</el-form-item>
|
||||
<el-form-item label="余量:">
|
||||
<el-input disabled v-model="detailData.ye" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入库日期:">
|
||||
<el-input disabled v-model="detailData.rkrq" />
|
||||
</el-form-item>
|
||||
<el-form-item label="入库单位:">
|
||||
<el-input disabled v-model="detailData.rkdw" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数量:">
|
||||
<el-input disabled v-model="detailData.sl"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位:">
|
||||
<el-input disabled v-model="detailData.dw" /> </el-form-item
|
||||
></el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12" style="position: relative">
|
||||
<el-image
|
||||
style="
|
||||
max-width: 180px;
|
||||
max-height: 180px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
"
|
||||
:src="detailData.photos[0]?.photoUrl"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
:preview-src-list="detailData.photos?.map((item) => item.photoUrl)"
|
||||
show-progresss
|
||||
fit="cover"
|
||||
/>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="存放地点:">
|
||||
<el-input disabled v-model="detailData.cfdd" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人:">
|
||||
<el-input disabled v-model="detailData.fzr" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话:">
|
||||
<el-input disabled v-model="detailData.lxdh" />
|
||||
</el-form-item>
|
||||
<el-form-item label="区县名称:">
|
||||
<el-input disabled v-model="detailData.qxmc" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<el-descriptions title="物资位置信息" column="3">
|
||||
<el-descriptions-item label="区县名称: ">{{
|
||||
detailData.material?.qxmc
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="物资经度: ">{{
|
||||
detailData.material?.jd
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="物资纬度: ">{{
|
||||
detailData.material?.wd
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<el-descriptions title="物资管理情况" column="3">
|
||||
<el-descriptions-item label="负责人: ">{{
|
||||
detailData.material?.fzr
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="入库人: ">{{
|
||||
detailData.material?.rkrName
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="入库日期: ">{{
|
||||
detailData.material?.rkrq?.slice(0, 10)
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -76,9 +60,4 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.detail-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -16,7 +16,6 @@ const filterText = ref(''); // 树节点过滤条件
|
||||
const tableData = ref([]);
|
||||
const qxmc = ref(''); // 区县名称
|
||||
const yhzid = ref(''); // 养护站id
|
||||
const yhzmc = ref(''); // 养护站名称
|
||||
const filterData = reactive({
|
||||
wzmc: '',
|
||||
}); // 表格过滤条件
|
||||
@ -43,38 +42,19 @@ const model = reactive({
|
||||
const dialogType = ref(''); // 弹窗类型
|
||||
const dialogRef = ref(null); // 弹窗实例
|
||||
|
||||
const drawerVisible = ref(false); // 抽屉显示状态
|
||||
const drawer = reactive({
|
||||
title: '',
|
||||
content: null,
|
||||
props: {},
|
||||
onCancel: null,
|
||||
onConfirm: null,
|
||||
direction: 'rtl',
|
||||
size: '50%'
|
||||
}); // 抽屉内容
|
||||
const drawerType = ref(''); // 抽屉类型
|
||||
const drawerRef = ref(null); // 抽屉实例
|
||||
|
||||
|
||||
|
||||
const INIT_FORM = {
|
||||
material: {
|
||||
rkrq: "",
|
||||
rkdw: "",
|
||||
sl: "",
|
||||
dw: "",
|
||||
cfdd: "",
|
||||
fzr: "",
|
||||
lxdh: "",
|
||||
ye: "",
|
||||
qxmc: "",
|
||||
wzmc: "",
|
||||
fzrid: "",
|
||||
yhzid: "",
|
||||
yhzmc: "",
|
||||
},
|
||||
photos: [],
|
||||
rkrq: "",
|
||||
rkdw: "",
|
||||
sl: "",
|
||||
dw: "",
|
||||
cfdd: "",
|
||||
fzr: "",
|
||||
lxdh: "",
|
||||
ye: "",
|
||||
qxmc: "",
|
||||
wzmc: "",
|
||||
fzrid: "",
|
||||
yhzid: "",
|
||||
}; // 表单初始值
|
||||
const form = reactive({ ...INIT_FORM }); // 表单
|
||||
|
||||
@ -116,8 +96,7 @@ const getTreeData = async () => {
|
||||
children: qx.yhzList.map(site => ({
|
||||
id: site.id,
|
||||
name: `${site.mc}(${site.wzsl})`,
|
||||
type: 'site',
|
||||
rawName: site.mc, // 原始名称
|
||||
type: 'site'
|
||||
})),
|
||||
rawName: qx.qxmc, // 原始名称
|
||||
})
|
||||
@ -137,21 +116,18 @@ const handleNodeClick = (data, node) => {
|
||||
if (data.type === 'area' && node.expanded === false) {
|
||||
console.log('树节点关闭', node.expanded)
|
||||
yhzid.value = ''; // 重置养护站id
|
||||
yhzmc.value = ''; // 重置养护站名称
|
||||
qxmc.value = ''; // 重置区县名称
|
||||
return;
|
||||
}
|
||||
if (data.type === 'area') {
|
||||
console.log('你点击的是区县', data.id)
|
||||
yhzid.value = ''; // 重置养护站id
|
||||
yhzmc.value = ''; // 重置养护站名称
|
||||
qxmc.value = data.id; // 保存区县名称
|
||||
|
||||
}
|
||||
if (data.type === 'site') {
|
||||
console.log('你点击的是站点', data.name)
|
||||
yhzid.value = data.id; // 保存养护站id
|
||||
yhzmc.value = data.rawName; // 保存养护站名称
|
||||
qxmc.value = ''; // 重置区县名称
|
||||
}
|
||||
};
|
||||
@ -195,24 +171,36 @@ const columns = [
|
||||
label: '余量',
|
||||
},
|
||||
{
|
||||
prop: 'dw',
|
||||
label: '单位',
|
||||
},
|
||||
{
|
||||
prop: 'fzr',
|
||||
label: '负责人',
|
||||
},
|
||||
{
|
||||
prop: 'rkrName',
|
||||
label: '入库人',
|
||||
prop: 'rkdw',
|
||||
label: '入库单位',
|
||||
},
|
||||
{
|
||||
prop: 'rkrq',
|
||||
label: '入库日期',
|
||||
},
|
||||
{
|
||||
prop: 'yhzMc',
|
||||
label: '所属服务站',
|
||||
prop: 'sl',
|
||||
label: '数量',
|
||||
},
|
||||
{
|
||||
prop: 'dw',
|
||||
label: '单位',
|
||||
},
|
||||
{
|
||||
prop: 'cfdd',
|
||||
label: '存放地点',
|
||||
},
|
||||
{
|
||||
prop: 'fzr',
|
||||
label: '负责人',
|
||||
},
|
||||
{
|
||||
prop: 'lxdh',
|
||||
label: '联系电话',
|
||||
},
|
||||
{
|
||||
prop: 'qxmc',
|
||||
label: '所属区县',
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
@ -317,20 +305,20 @@ const getDetailData = async (row) => {
|
||||
}
|
||||
if (res.code === '00000') {
|
||||
if (dialogType.value === 'detail') {
|
||||
drawer.title = `物资详情`;
|
||||
drawer.content = DetailDialog;
|
||||
drawer.props = {
|
||||
detailData: res.data,
|
||||
model.title = `物资详情`;
|
||||
model.content = DetailDialog;
|
||||
model.props = {
|
||||
detailData: res.data.material,
|
||||
};
|
||||
drawer.onCancel = () => {
|
||||
model.onCancel = () => {
|
||||
dialogType.value = '';
|
||||
drawerVisible.value = false;
|
||||
modelVisible.value = false;
|
||||
};
|
||||
drawer.onConfirm = () => {
|
||||
model.onConfirm = () => {
|
||||
dialogType.value = '';
|
||||
drawerVisible.value = false;
|
||||
modelVisible.value = false;
|
||||
};
|
||||
drawerVisible.value = true;
|
||||
modelVisible.value = true;
|
||||
}
|
||||
if (dialogType.value === 'edit') {
|
||||
model.title = `编辑物资`;
|
||||
@ -365,8 +353,6 @@ const openAddModel = () => {
|
||||
model.title = `新增物资`;
|
||||
model.content = AddDialog;
|
||||
Object.assign(form, INIT_FORM);
|
||||
form.material.yhzid = yhzid.value;
|
||||
form.material.yhzmc = yhzmc.value;
|
||||
model.props = {
|
||||
detailData: {},
|
||||
form: form,
|
||||
@ -455,7 +441,7 @@ export default () => {
|
||||
await getTreeData();
|
||||
await getyhzwzList();
|
||||
const rowData = (decodeURIComponent(route.params?.data));
|
||||
if (rowData !== 'undefined' && rowData !== 'null' && rowData !== '') {
|
||||
if (rowData !== 'undefined' && rowData!== 'null' && rowData !== '' ) {
|
||||
const JSONData = JSON.parse(rowData);
|
||||
filterText.value = JSONData.mc;
|
||||
};
|
||||
@ -476,9 +462,5 @@ export default () => {
|
||||
dialogRef,
|
||||
model,
|
||||
openAddModel,
|
||||
drawerVisible,
|
||||
drawer,
|
||||
drawerRef,
|
||||
yhzid,
|
||||
}
|
||||
}
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<div class="event-box">
|
||||
<el-button v-if="script.yhzid.value" type="primary" size="large" @click="script.openAddModel"
|
||||
<el-button type="primary" size="large" @click="script.openAddModel"
|
||||
>新增物资</el-button
|
||||
>
|
||||
<el-button type="info" size="large" @click="script.handelExport"
|
||||
@ -57,17 +57,6 @@
|
||||
width="60%"
|
||||
>
|
||||
</MyDialog>
|
||||
<MyDrawer
|
||||
v-model="script.drawerVisible.value"
|
||||
:title="script.drawer?.title"
|
||||
:dynamicComponent="script.drawer?.content"
|
||||
:component-props="script.drawer?.props"
|
||||
:onConfirm="script.drawer?.onConfirm"
|
||||
:onCancel="script.drawer?.onCancel"
|
||||
ref="drawerRef"
|
||||
:direction="script.drawer?.direction"
|
||||
:size="script.drawer?.size"
|
||||
></MyDrawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -76,10 +65,9 @@
|
||||
import scriptFn from "./index.js";
|
||||
import DynamicTable from "../../component/DynamicTable";
|
||||
import MyDialog from "../../component/MyDialog";
|
||||
import MyDrawer from "../../component/MyDrawer/index.js";
|
||||
|
||||
const script = scriptFn();
|
||||
const { treeRef, dialogRef, drawerRef } = script;
|
||||
const { treeRef, dialogRef } = script;
|
||||
</script>
|
||||
<style scoped>
|
||||
.root {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user