增加站点页面，公司列表页面
parent
135b96fa6e
commit
74ecc7b357
|
|
@ -4,6 +4,11 @@
|
|||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script charset="utf-8"
|
||||
src="https://map.qq.com/api/gljs?v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ&libraries=service"></script>
|
||||
|
||||
<script charset="utf-8"
|
||||
src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ"></script>
|
||||
<style>
|
||||
html {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<!-- <ElFormItem label="主体类型，GeTiHu 个体户、QiYe 企业">
|
||||
<ElInput
|
||||
v-model="searchForm.orgCategory"
|
||||
placeholder="主体类型，GeTiHu 个体户、QiYe 企业"/>
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label="统一社会信用代码">
|
||||
<ElInput v-model="searchForm.uscc" placeholder="统一社会信用代码" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="组织名称">
|
||||
<ElInput v-model="searchForm.orgName" placeholder="组织名称" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人名称">
|
||||
<ElInput v-model="searchForm.legalRepresentative" placeholder="法人名称" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="市">
|
||||
<ElInput v-model="searchForm.cityName" placeholder="市" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="区县">
|
||||
<ElInput v-model="searchForm.areaName" placeholder="区县" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="乡镇街道">
|
||||
<ElInput v-model="searchForm.townName" placeholder="乡镇街道" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="详细地址">
|
||||
<ElInput v-model="searchForm.address" placeholder="详细地址" />
|
||||
</ElFormItem>
|
||||
|
||||
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<div class="tool-bar">
|
||||
<div></div>
|
||||
<!-- <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton> -->
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
|
||||
</div>
|
||||
|
||||
<ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
|
||||
<!-- ，GeTiHu-个体户、QiYe--企业 -->
|
||||
<ElTableColumn label="主体类型" prop="orgCategoryTxt" />
|
||||
<!-- <ElTableColumn label="统一社会信用代码" prop="uscc" /> -->
|
||||
<ElTableColumn label="组织名称" prop="orgName" width="140"/>
|
||||
<ElTableColumn label="营业执照" width="100px">
|
||||
<template #default="{ row }">
|
||||
<el-image :preview-src-list="[AppApi.fileUrl(row.businessLicense)]" :src="AppApi.fileUrl(row.businessLicense)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="法人名称" prop="legalRepresentative" />
|
||||
<!-- <ElTableColumn label="法人身份证号" prop="idcard" />
|
||||
<ElTableColumn label="身份证有效期" prop="idcardStartTime"/>
|
||||
<ElTableColumn label="身份证有效期" prop="idcardEndTime"/> -->
|
||||
<ElTableColumn label="身份证正面" prop="idcardFront" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image :preview-src-list="[AppApi.fileUrl(row.idcardFront)]" :src="AppApi.fileUrl(row.idcardFront)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="身份证反面" prop="idcardBack" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image :preview-src-list="[AppApi.fileUrl(row.idcardBack)]" :src="AppApi.fileUrl(row.idcardBack)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<!-- <ElTableColumn label="省" prop="provinceName"/>
|
||||
<ElTableColumn label="市" prop="cityName"/> -->
|
||||
<ElTableColumn label="区县" prop="areaName" />
|
||||
<ElTableColumn label="乡镇街道" prop="townName" />
|
||||
<ElTableColumn label="详细地址" prop="address" width="180" />
|
||||
<!-- <ElTableColumn label="经度" prop="lng" />
|
||||
<ElTableColumn label="纬度" prop="lat" /> -->
|
||||
<ElTableColumn label="创建时间" prop="createTime" width="140" />
|
||||
<ElTableColumn label="修改时间" prop="modifyTime" width="140" />
|
||||
<ElTableColumn label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<!-- <ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton> -->
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination layout="->, sizes, total, prev, pager, next" v-model:current-page="searchForm.current" v-model:page-size="searchForm.size" :total="totalCount" :page-sizes="[10, 20, 50, 100, 500]" :hide-on-single-page="false" :teleported="false" @change="paging" />
|
||||
<OrgForm ref="orgForm" @edit-succ="paging" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import OrgApi from "@/pages/cst/org/org-api.ts";
|
||||
import OrgForm from "@/pages/cst/org/OrgForm.vue";
|
||||
import Page from "@/components/page/Page.vue";
|
||||
import { elIcons } from "@/common/element/element.ts";
|
||||
import Utils from "@/common/utils";
|
||||
import AppApi from "@/common/app/app-api.ts";
|
||||
|
||||
const totalCount = ref(0);
|
||||
const tableData = Utils.resetAble(reactive<OrgTypes.SearchOrgResult[]>([]));
|
||||
const searchForm = Utils.resetAble(
|
||||
reactive<OrgTypes.SearchOrgParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
})
|
||||
);
|
||||
const searching = ref(false);
|
||||
const deling = ref(false);
|
||||
const showSearchForm = ref(true);
|
||||
const orgFormIns = useTemplateRef<InstanceType<typeof OrgForm>>("orgForm");
|
||||
|
||||
// function showDialog(data?: OrgTypes.SearchOrgResult) {
|
||||
// orgFormIns.value?.open(data);
|
||||
// }
|
||||
|
||||
function delHandler({ row }: { row: OrgTypes.SearchOrgResult }) {
|
||||
deling.value = true;
|
||||
OrgApi.del([row.id!])
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
paging();
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// function modifyHandler({ row }: { row: OrgTypes.SearchOrgResult }) {
|
||||
// showDialog(row);
|
||||
// }
|
||||
|
||||
// function addHandler() {
|
||||
// showDialog();
|
||||
// }
|
||||
|
||||
function reset() {
|
||||
searchForm.$reset();
|
||||
paging();
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true;
|
||||
OrgApi.paging(searchForm)
|
||||
.then((res) => {
|
||||
totalCount.value = res.data?.total ?? 0;
|
||||
tableData.$reset(res.data?.records ?? []);
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
paging();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
margin 0 0 20px 0
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="fit-content"
|
||||
@close="dialogCloseHandler">
|
||||
<ElForm :model="formData"
|
||||
:rules="rules"
|
||||
ref="orgForm"
|
||||
class="form-panel"
|
||||
label-width="auto">
|
||||
<ElFormItem label="Id" prop="id">
|
||||
<ElInput
|
||||
v-model="formData.id"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="主体类型，GeTiHu-->个体户、QiYe-->企业" prop="orgCategory">
|
||||
<ElInput
|
||||
v-model="formData.orgCategory"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="主体类型，GeTiHu-->个体户、QiYe-->企业"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="统一社会信用代码" prop="uscc">
|
||||
<ElInput
|
||||
v-model="formData.uscc"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="统一社会信用代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="组织名称" prop="orgName">
|
||||
<ElInput
|
||||
v-model="formData.orgName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="组织名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="营业执照" prop="businessLicense">
|
||||
<ElInput
|
||||
v-model="formData.businessLicense"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="营业执照"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="营业执照有效期" prop="licenseStartTime">
|
||||
<ElInput
|
||||
v-model="formData.licenseStartTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="营业执照有效期"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="营业执照有效期" prop="licenseEndTime">
|
||||
<ElInput
|
||||
v-model="formData.licenseEndTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="营业执照有效期"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人名称" prop="legalRepresentative">
|
||||
<ElInput
|
||||
v-model="formData.legalRepresentative"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="法人名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人身份证号" prop="idcard">
|
||||
<ElInput
|
||||
v-model="formData.idcard"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="法人身份证号"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人身份证有效期" prop="idcardStartTime">
|
||||
<ElInput
|
||||
v-model="formData.idcardStartTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="法人身份证有效期"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人身份证有效期" prop="idcardEndTime">
|
||||
<ElInput
|
||||
v-model="formData.idcardEndTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="法人身份证有效期"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人身份证正面" prop="idcardFront">
|
||||
<ElInput
|
||||
v-model="formData.idcardFront"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="法人身份证正面"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="法人身份证反面" prop="idcardBack">
|
||||
<ElInput
|
||||
v-model="formData.idcardBack"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="法人身份证反面"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="省；代码" prop="province">
|
||||
<ElInput
|
||||
v-model="formData.province"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="省；代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="市；代码" prop="city">
|
||||
<ElInput
|
||||
v-model="formData.city"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="市；代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="区县；代码" prop="area">
|
||||
<ElInput
|
||||
v-model="formData.area"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="区县；代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="乡镇街道；代码" prop="town">
|
||||
<ElInput
|
||||
v-model="formData.town"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="乡镇街道；代码"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="省；名称" prop="provinceName">
|
||||
<ElInput
|
||||
v-model="formData.provinceName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="省；名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="市；名称" prop="cityName">
|
||||
<ElInput
|
||||
v-model="formData.cityName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="市；名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="区县；名称" prop="areaName">
|
||||
<ElInput
|
||||
v-model="formData.areaName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="区县；名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="乡镇街道；名称" prop="townName">
|
||||
<ElInput
|
||||
v-model="formData.townName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="乡镇街道；名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="详细地址" prop="address">
|
||||
<ElInput
|
||||
v-model="formData.address"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="详细地址"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="经度" prop="lng">
|
||||
<ElInput
|
||||
v-model="formData.lng"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="经度"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="纬度" prop="lat">
|
||||
<ElInput
|
||||
v-model="formData.lat"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="纬度"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建人 Id； sys_user.id" prop="creatorId">
|
||||
<ElInput
|
||||
v-model="formData.creatorId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="创建人 Id； sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
|
||||
<ElInput
|
||||
v-model="formData.modifierId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="修改人 Id； sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建时间" prop="createTime">
|
||||
<ElInput
|
||||
v-model="formData.createTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="创建时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间" prop="modifyTime">
|
||||
<ElInput
|
||||
v-model="formData.modifyTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="修改时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
|
||||
<ElInput
|
||||
v-model="formData.deleted"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否删除； 0-->未删除、1-->已删除"/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import OrgApi from '@/pages/cst/org/org-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import FormUtil from '@/common/utils/formUtil.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import {
|
||||
ElMessage,
|
||||
type FormInstance,
|
||||
type FormRules,
|
||||
} from 'element-plus'
|
||||
|
||||
const emits = defineEmits(['editSucc'])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
|
||||
const orgFormIns = useTemplateRef<FormInstance>('orgForm')
|
||||
|
||||
const formData = Utils.resetAble(reactive<OrgTypes.SearchOrgResult>({}))
|
||||
const rules = reactive<FormRules<OrgTypes.SearchOrgResult>>({
|
||||
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
|
||||
orgCategory: [{ required: true, message: '请填写主体类型，GeTiHu-->个体户、QiYe-->企业', trigger: 'blur' }],
|
||||
uscc: [{ required: true, message: '请填写统一社会信用代码', trigger: 'blur' }],
|
||||
orgName: [{ required: true, message: '请填写组织名称', trigger: 'blur' }],
|
||||
businessLicense: [{ required: true, message: '请填写营业执照', trigger: 'blur' }],
|
||||
licenseStartTime: [{ required: true, message: '请填写营业执照有效期', trigger: 'blur' }],
|
||||
licenseEndTime: [{ required: true, message: '请填写营业执照有效期', trigger: 'blur' }],
|
||||
legalRepresentative: [{ required: true, message: '请填写法人名称', trigger: 'blur' }],
|
||||
idcard: [{ required: true, message: '请填写法人身份证号', trigger: 'blur' }],
|
||||
idcardStartTime: [{ required: true, message: '请填写法人身份证有效期', trigger: 'blur' }],
|
||||
idcardEndTime: [{ required: true, message: '请填写法人身份证有效期', trigger: 'blur' }],
|
||||
idcardFront: [{ required: true, message: '请填写法人身份证正面', trigger: 'blur' }],
|
||||
idcardBack: [{ required: true, message: '请填写法人身份证反面', trigger: 'blur' }],
|
||||
province: [{ required: true, message: '请填写省；代码', trigger: 'blur' }],
|
||||
city: [{ required: true, message: '请填写市；代码', trigger: 'blur' }],
|
||||
area: [{ required: true, message: '请填写区县；代码', trigger: 'blur' }],
|
||||
town: [{ required: true, message: '请填写乡镇街道；代码', trigger: 'blur' }],
|
||||
provinceName: [{ required: true, message: '请填写省；名称', trigger: 'blur' }],
|
||||
cityName: [{ required: true, message: '请填写市；名称', trigger: 'blur' }],
|
||||
areaName: [{ required: true, message: '请填写区县；名称', trigger: 'blur' }],
|
||||
townName: [{ required: true, message: '请填写乡镇街道；名称', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
|
||||
lng: [{ required: true, message: '请填写经度', trigger: 'blur' }],
|
||||
lat: [{ required: true, message: '请填写纬度', trigger: 'blur' }],
|
||||
creatorId: [{ required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur' }],
|
||||
modifierId: [{ required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur' }],
|
||||
createTime: [{ required: true, message: '请填写创建时间', trigger: 'blur' }],
|
||||
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
|
||||
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.$reset()
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (formData.id != null) {
|
||||
FormUtil.submit(orgFormIns, () => OrgApi.modify(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
} else {
|
||||
FormUtil.submit(orgFormIns, () => OrgApi.add(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: OrgTypes.SearchOrgResult = {}) {
|
||||
showDialog.value = true
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
OrgApi.detail(data.id!)
|
||||
.then(res => {
|
||||
formData.$reset(res.data)
|
||||
})
|
||||
} else {
|
||||
status.value = 'add'
|
||||
formData.$reset(data)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form-panel {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
paging(data: OrgTypes.SearchOrgParam) {
|
||||
return get<G.PageResult<OrgTypes.SearchOrgResult>>('/org/paging', data)
|
||||
},
|
||||
detail(id: string) {
|
||||
return get<OrgTypes.SearchOrgResult>('/org/detail', {id})
|
||||
},
|
||||
add(data: OrgTypes.AddOrgParam) {
|
||||
return post('/org/add', data)
|
||||
},
|
||||
modify(data: OrgTypes.ModifyOrgParam) {
|
||||
return post('/org/modify', data)
|
||||
},
|
||||
del(ids: string[]) {
|
||||
return post('/org/del', ids)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
export {}
|
||||
|
||||
declare global {
|
||||
namespace OrgTypes {
|
||||
interface SearchOrgParam extends G.PageParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 主体类型，GeTiHu-->个体户、QiYe-->企业
|
||||
orgCategory?: string
|
||||
// 统一社会信用代码
|
||||
uscc?: string
|
||||
// 组织名称
|
||||
orgName?: string
|
||||
// 营业执照
|
||||
businessLicense?: string
|
||||
// 营业执照有效期
|
||||
licenseStartTime?: string
|
||||
// 营业执照有效期
|
||||
licenseEndTime?: string
|
||||
// 法人名称
|
||||
legalRepresentative?: string
|
||||
// 法人身份证号
|
||||
idcard?: string
|
||||
// 法人身份证有效期
|
||||
idcardStartTime?: string
|
||||
// 法人身份证有效期
|
||||
idcardEndTime?: string
|
||||
// 法人身份证正面
|
||||
idcardFront?: string
|
||||
// 法人身份证反面
|
||||
idcardBack?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface SearchOrgResult {
|
||||
// Id
|
||||
id: string
|
||||
// 主体类型，GeTiHu-->个体户、QiYe-->企业
|
||||
orgCategory?: string
|
||||
// 统一社会信用代码
|
||||
uscc?: string
|
||||
// 组织名称
|
||||
orgName?: string
|
||||
// 营业执照
|
||||
businessLicense?: string
|
||||
// 营业执照有效期
|
||||
licenseStartTime?: string
|
||||
// 营业执照有效期
|
||||
licenseEndTime?: string
|
||||
// 法人名称
|
||||
legalRepresentative?: string
|
||||
// 法人身份证号
|
||||
idcard?: string
|
||||
// 法人身份证有效期
|
||||
idcardStartTime?: string
|
||||
// 法人身份证有效期
|
||||
idcardEndTime?: string
|
||||
// 法人身份证正面
|
||||
idcardFront?: string
|
||||
// 法人身份证反面
|
||||
idcardBack?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface AddOrgParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 主体类型，GeTiHu-->个体户、QiYe-->企业
|
||||
orgCategory?: string
|
||||
// 统一社会信用代码
|
||||
uscc?: string
|
||||
// 组织名称
|
||||
orgName?: string
|
||||
// 营业执照
|
||||
businessLicense?: string
|
||||
// 营业执照有效期
|
||||
licenseStartTime?: string
|
||||
// 营业执照有效期
|
||||
licenseEndTime?: string
|
||||
// 法人名称
|
||||
legalRepresentative?: string
|
||||
// 法人身份证号
|
||||
idcard?: string
|
||||
// 法人身份证有效期
|
||||
idcardStartTime?: string
|
||||
// 法人身份证有效期
|
||||
idcardEndTime?: string
|
||||
// 法人身份证正面
|
||||
idcardFront?: string
|
||||
// 法人身份证反面
|
||||
idcardBack?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface ModifyOrgParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 主体类型，GeTiHu-->个体户、QiYe-->企业
|
||||
orgCategory?: string
|
||||
// 统一社会信用代码
|
||||
uscc?: string
|
||||
// 组织名称
|
||||
orgName?: string
|
||||
// 营业执照
|
||||
businessLicense?: string
|
||||
// 营业执照有效期
|
||||
licenseStartTime?: string
|
||||
// 营业执照有效期
|
||||
licenseEndTime?: string
|
||||
// 法人名称
|
||||
legalRepresentative?: string
|
||||
// 法人身份证号
|
||||
idcard?: string
|
||||
// 法人身份证有效期
|
||||
idcardStartTime?: string
|
||||
// 法人身份证有效期
|
||||
idcardEndTime?: string
|
||||
// 法人身份证正面
|
||||
idcardFront?: string
|
||||
// 法人身份证反面
|
||||
idcardBack?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/cst/org/Org.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<ElFormItem label="站点名称">
|
||||
<ElInput
|
||||
v-model="searchForm.stationName"
|
||||
placeholder="站点名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="省">
|
||||
<ElInput
|
||||
v-model="searchForm.provinceName"
|
||||
placeholder="请输入省"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="市">
|
||||
<ElInput
|
||||
v-model="searchForm.cityName"
|
||||
placeholder="请输入市"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="区县">
|
||||
<ElInput
|
||||
v-model="searchForm.areaName"
|
||||
placeholder="请输入区县"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="乡镇街道">
|
||||
<ElInput
|
||||
v-model="searchForm.townName"
|
||||
placeholder="请输入乡镇街道"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="详细地址">
|
||||
<ElInput
|
||||
v-model="searchForm.address"
|
||||
placeholder="详细地址"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="经度">
|
||||
<ElInput
|
||||
v-model="searchForm.lng"
|
||||
placeholder="经度"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="纬度">
|
||||
<ElInput
|
||||
v-model="searchForm.lat"
|
||||
placeholder="纬度"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建时间">
|
||||
<ElInput
|
||||
v-model="searchForm.createTime"
|
||||
placeholder="创建时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间">
|
||||
<ElInput
|
||||
v-model="searchForm.modifyTime"
|
||||
placeholder="修改时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<div class="tool-bar">
|
||||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
|
||||
</div>
|
||||
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<ElTableColumn label="所属公司" prop="org.orgName"/>
|
||||
<ElTableColumn label="站点名称" prop="stationName"/>
|
||||
<ElTableColumn label="省" prop="provinceName"/>
|
||||
<ElTableColumn label="市" prop="cityName"/>
|
||||
<ElTableColumn label="区县" prop="areaName"/>
|
||||
<ElTableColumn label="乡镇街道" prop="townName"/>
|
||||
<ElTableColumn label="详细地址" prop="address" width="160px"/>
|
||||
<ElTableColumn label="经度" prop="lng" width="100px"/>
|
||||
<ElTableColumn label="纬度" prop="lat" width="100px"/>
|
||||
<ElTableColumn label="创建时间" prop="createTime" width="170px"/>
|
||||
<ElTableColumn label="修改时间" prop="modifyTime" width="170px"/>
|
||||
<ElTableColumn label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElPopconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
confirm-button-type="danger"
|
||||
cancel-button-type="primary"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination
|
||||
layout="->, sizes, total, prev, pager, next"
|
||||
v-model:current-page="searchForm.current"
|
||||
v-model:page-size="searchForm.size"
|
||||
:total="totalCount"
|
||||
:page-sizes="[10, 20, 50, 100, 500]"
|
||||
:hide-on-single-page="false"
|
||||
:teleported="false"
|
||||
@change="paging"/>
|
||||
<StationForm ref="stationForm" @edit-succ="paging"/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import StationApi from '@/pages/cst/station/station-api.ts'
|
||||
import StationForm from '@/pages/cst/station/StationForm.vue'
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import Utils from '@/common/utils'
|
||||
|
||||
const totalCount = ref(0)
|
||||
const tableData = Utils.resetAble(reactive<StationTypes.SearchStationResult[]>([]))
|
||||
const searchForm = Utils.resetAble(reactive<StationTypes.SearchStationParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
}))
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const stationFormIns = useTemplateRef<InstanceType<typeof StationForm>>('stationForm')
|
||||
|
||||
function showDialog(data?: StationTypes.SearchStationResult) {
|
||||
stationFormIns.value?.open(data)
|
||||
}
|
||||
|
||||
function delHandler({row}: { row: StationTypes.SearchStationResult }) {
|
||||
deling.value = true
|
||||
StationApi.del([ row.id! ])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function modifyHandler({row}: { row: StationTypes.SearchStationResult }) {
|
||||
showDialog(row)
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
searchForm.$reset()
|
||||
paging()
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
StationApi.paging(searchForm)
|
||||
.then(res => {
|
||||
totalCount.value = res.data?.total ?? 0
|
||||
tableData.$reset(res.data?.records ?? [])
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
margin 0 0 20px 0
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content space-between
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<template>
|
||||
<!-- destroy-on-close -->
|
||||
<ElDialog v-model="showDialog" :close-on-click-modal="false" width="fit-content" @close="dialogCloseHandler">
|
||||
<ElForm :model="formData" :rules="rules" ref="stationForm" class="form-panel" label-width="auto" style="width: 600px">
|
||||
|
||||
<ElFormItem label="组织信息 Id" prop="orgId">
|
||||
<!-- <ElInput v-model="formData.orgId" :disabled="status === 'view'" placeholder="组织信息 Id" /> -->
|
||||
|
||||
<el-select v-model="formData.orgId" :disabled="status === 'view'" placeholder="产品类型" filterable remote reserve-keyword remote-show-suffix :remote-method="remoteOrg" :loading="loadingOrg">
|
||||
<el-option v-for="item in orgList" :key="item.id" :label="item.orgName" :value="item.id" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="站点名称" prop="stationName">
|
||||
<ElInput v-model="formData.stationName" :disabled="status === 'view'" placeholder="站点名称" />
|
||||
</ElFormItem>
|
||||
<!-- <ElFormItem label="省；代码" prop="province">
|
||||
<ElInput v-model="formData.province" :disabled="status === 'view'" placeholder="省；代码" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="市；代码" prop="city">
|
||||
<ElInput v-model="formData.city" :disabled="status === 'view'" placeholder="市；代码" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="区县；代码" prop="area">
|
||||
<ElInput v-model="formData.area" :disabled="status === 'view'" placeholder="区县；代码" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="乡镇街道；代码" prop="town">
|
||||
<ElInput v-model="formData.town" :disabled="status === 'view'" placeholder="乡镇街道；代码" />
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label="详细地址" prop="address">
|
||||
<el-select v-model="formData.address" :disabled="status === 'view'" placeholder="详细地址" filterable remote reserve-keyword remote-show-suffix :remote-method="remoteMethod" @change="addressChange" :loading="loading">
|
||||
<el-option v-for="item in addList" :key="item.id" :label="item.address" :value="item.address" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="省" prop="provinceName">
|
||||
<ElInput v-model="formData.provinceName" :disabled="status === 'view'" placeholder="省" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="市" prop="cityName">
|
||||
<ElInput v-model="formData.cityName" :disabled="status === 'view'" placeholder="市" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="区县" prop="areaName">
|
||||
<ElInput v-model="formData.areaName" :disabled="status === 'view'" placeholder="区县" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="乡镇街道" prop="townName">
|
||||
<ElInput v-model="formData.townName" :disabled="status === 'view'" placeholder="乡镇街道" />
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="经度" prop="lng">
|
||||
<ElInput v-model="formData.lng" :disabled="status === 'view'" placeholder="经度" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="纬度" prop="lat">
|
||||
<ElInput v-model="formData.lat" :disabled="status === 'view'" placeholder="纬度" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<div id="container" style="width: 100%; height: 400px"></div>
|
||||
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import StationApi from "@/pages/cst/station/station-api.ts";
|
||||
import Strings from "@/common/utils/strings.ts";
|
||||
import FormUtil from "@/common/utils/formUtil.ts";
|
||||
import Utils from "@/common/utils";
|
||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||
import { geocoder, init, latLng, marker, search } from "./map.ts";
|
||||
import OrgApi from "@/pages/cst/org/org-api.ts";
|
||||
|
||||
const emits = defineEmits(["editSucc"]);
|
||||
const showDialog = ref(false);
|
||||
const submiting = ref(false);
|
||||
const status = ref<"add" | "view" | "modify">("add");
|
||||
|
||||
const stationFormIns = useTemplateRef<FormInstance>("stationForm");
|
||||
|
||||
const formData = Utils.resetAble(reactive<StationTypes.SearchStationResult>({}));
|
||||
const rules = reactive<FormRules<StationTypes.SearchStationResult>>({
|
||||
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||||
orgId: [{ required: true, message: "请填写组织信息 Id", trigger: "blur" }],
|
||||
stationName: [{ required: true, message: "请填写站点名称", trigger: "blur" }],
|
||||
province: [{ required: true, message: "请填写省；代码", trigger: "blur" }],
|
||||
city: [{ required: true, message: "请填写市；代码", trigger: "blur" }],
|
||||
area: [{ required: true, message: "请填写区县；代码", trigger: "blur" }],
|
||||
town: [{ required: true, message: "请填写乡镇街道；代码", trigger: "blur" }],
|
||||
provinceName: [{ required: true, message: "请填写省", trigger: "blur" }],
|
||||
cityName: [{ required: true, message: "请填写市", trigger: "blur" }],
|
||||
areaName: [{ required: true, message: "请填写区县", trigger: "blur" }],
|
||||
townName: [{ required: true, message: "请填写乡镇街道", trigger: "blur" }],
|
||||
address: [{ required: true, message: "请填写详细地址", trigger: "blur" }],
|
||||
lng: [{ required: true, message: "请填写经度", trigger: "blur" }],
|
||||
lat: [{ required: true, message: "请填写纬度", trigger: "blur" }],
|
||||
creatorId: [{ required: true, message: "请填写创建人", trigger: "blur" }],
|
||||
modifierId: [{ required: true, message: "请填写修改人", trigger: "blur" }],
|
||||
createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
|
||||
modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
|
||||
deleted: [{ required: true, message: "请填写是否删除", trigger: "blur" }],
|
||||
});
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.$reset();
|
||||
if (markers) {
|
||||
markers.setMap(null);
|
||||
markers = null;
|
||||
}
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === "view") return;
|
||||
submiting.value = true;
|
||||
if (formData.id != null) {
|
||||
FormUtil.submit(stationFormIns, () => StationApi.modify(formData))
|
||||
.then(() => {
|
||||
ElMessage.success("修改成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
} else {
|
||||
FormUtil.submit(stationFormIns, () => StationApi.add(formData))
|
||||
.then(() => {
|
||||
ElMessage.success("添加成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
let map: any;
|
||||
let markers: any;
|
||||
|
||||
const getDetail = (latLng: string) => {
|
||||
if (markers) {
|
||||
markers.setMap(null);
|
||||
markers = null;
|
||||
}
|
||||
markers = marker(map, latLng);
|
||||
|
||||
map.easeTo({ zoom: 13, center: latLng }, { duration: 1000 });
|
||||
|
||||
geocoder(latLng)
|
||||
.getAddress({
|
||||
location: latLng,
|
||||
})
|
||||
.then((res: any) => {
|
||||
// address.value = res.result.formatted_addresses.standard_address
|
||||
let res1 = res.result;
|
||||
|
||||
formData.address = res1.formatted_addresses.standard_address;
|
||||
formData.area = res1.ad_info.adcode;
|
||||
formData.areaName = res1.ad_info.district;
|
||||
formData.city = res1.ad_info.city_code;
|
||||
formData.cityName = res1.ad_info.city;
|
||||
formData.province = "340000";
|
||||
formData.provinceName = "安徽省";
|
||||
|
||||
formData.lat = res1.location.lat;
|
||||
formData.lng = res1.location.lng;
|
||||
formData.town = res1.address_reference.town.id;
|
||||
formData.townName = res1.address_reference.town.title;
|
||||
console.log(formData, "formData");
|
||||
});
|
||||
};
|
||||
|
||||
const orgList = ref<OrgTypes.SearchOrgResult[]>([]);
|
||||
const loadingOrg = ref(false);
|
||||
|
||||
const remoteOrg = (query: string) => {
|
||||
loading.value = true;
|
||||
OrgApi.paging({ size: 50, orgName: query || undefined }).then((res) => {
|
||||
orgList.value = res.data.records;
|
||||
loadingOrg.value = false;
|
||||
// category.value = list.value.filter((item) => {
|
||||
// return item.label.toLowerCase().includes(query.toLowerCase())
|
||||
// })
|
||||
});
|
||||
// } else {
|
||||
// category.value = [];
|
||||
// }
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const addList = ref<any>([]);
|
||||
const remoteMethod = (query: string) => {
|
||||
if (query) {
|
||||
loading.value = true;
|
||||
|
||||
search()
|
||||
.searchRectangle({
|
||||
keyword: query,
|
||||
bounds: map.getBounds(),
|
||||
})
|
||||
.then((res: any) => {
|
||||
addList.value = res.data;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let addressChange = (e: string) => {
|
||||
console.log(e, "eee");
|
||||
if (addList.value) {
|
||||
let item = addList.value.find((add: any) => (add.address == e));
|
||||
if (item) getDetail(latLng(item.location.lat, item.location.lng));
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open(data: StationTypes.SearchStationResult = {}) {
|
||||
showDialog.value = true;
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = "modify";
|
||||
StationApi.detail(data.id!).then((res) => {
|
||||
formData.$reset(res.data);
|
||||
});
|
||||
} else {
|
||||
status.value = "add";
|
||||
formData.$reset(data);
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!map) {
|
||||
map = init("container");
|
||||
map.on("click", (evt: any) => {
|
||||
getDetail(evt.latLng);
|
||||
});
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form-panel {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
/* eslint-disable consistent-return */
|
||||
declare const TMap: any;
|
||||
const init = (mapId: any) => {
|
||||
// const elem = document.getElementById(mapId);
|
||||
// console.log(elem, 'elem');
|
||||
return new TMap.Map(mapId, {
|
||||
zoom: 11,
|
||||
center: new TMap.LatLng(32.255903, 118.333417),
|
||||
renderOptions: {
|
||||
enableBloom: true // 泛光
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const latLng = (e: any, e1: any) => {
|
||||
return new TMap.LatLng(e, e1);
|
||||
};
|
||||
|
||||
const marker = (map: any, center: any) => {
|
||||
return new TMap.MultiMarker({
|
||||
map,
|
||||
styles: {
|
||||
// 点标记样式
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 20, // 样式宽
|
||||
height: 30, // 样式高
|
||||
anchor: { x: 10, y: 30 } // 描点位置
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
// 点标记数据数组
|
||||
{
|
||||
// 标记位置(纬度，经度，高度)
|
||||
position: center,
|
||||
id: 'marker'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
const search: any = () => {
|
||||
return new TMap.service.Search({
|
||||
pageSize: 20
|
||||
});
|
||||
// return new Promise((resolve) => {
|
||||
// upload.searchRectangle(opt).then((res: any) => {
|
||||
// resolve(res.data);
|
||||
// });
|
||||
// });
|
||||
};
|
||||
|
||||
const geocoder: any = () => {
|
||||
return new TMap.service.Geocoder();
|
||||
|
||||
// return new Promise((resolve) => {
|
||||
// upload.searchRectangle(opt).then((res: any) => {
|
||||
// resolve(res.data);
|
||||
// });
|
||||
// });
|
||||
};
|
||||
|
||||
const multiPolyline = (e: any, pathArr: any) => {
|
||||
return new TMap.MultiPolyline({
|
||||
map: e, // 绘制到目标地图
|
||||
// 折线样式定义
|
||||
styles: {
|
||||
style_blue: new TMap.PolylineStyle({
|
||||
color: '#3777FF', // 线填充色
|
||||
width: 4, // 折线宽度
|
||||
borderWidth: 2, // 边线宽度
|
||||
borderColor: '#FFF', // 边线颜色
|
||||
lineCap: 'round', // 线端头方式
|
||||
eraseColor: 'rgba(190,188,188,1)'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: 'car',
|
||||
styleId: 'style_blue',
|
||||
paths: pathArr
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
const multiPolyline1 = (map: any, pathArr: any) => {
|
||||
return new TMap.MultiPolyline({
|
||||
map, // 绘制到目标地图
|
||||
// 折线样式定义
|
||||
styles: {
|
||||
style_blue: new TMap.PolylineStyle({
|
||||
color: '#3777FF', // 线填充色
|
||||
width: 4, // 折线宽度
|
||||
borderWidth: 2, // 边线宽度
|
||||
borderColor: '#FFF', // 边线颜色
|
||||
lineCap: 'round', // 线端头方式
|
||||
eraseColor: 'rgba(190,188,188,1)'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: 'car',
|
||||
styleId: 'style_blue',
|
||||
paths: pathArr
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
const multiMarker = (map: any, e: any) => {
|
||||
return new TMap.MultiMarker({
|
||||
map,
|
||||
styles: {
|
||||
'car-down': new TMap.MarkerStyle({
|
||||
color: '#3777FF', // 颜色属性
|
||||
angle: 0, // 文字旋转属性
|
||||
alignment: 'center', // 文字水平对齐属性
|
||||
verticalAlignment: 'middle', // 文字垂直对齐属性
|
||||
size: 16, // 标注点文本文字大小
|
||||
offset: { x: 0, y: -30 }, // 标注点文本文字基于direction方位的偏移属性
|
||||
width: 20,
|
||||
height: 44,
|
||||
faceTo: 'map',
|
||||
rotate: 180,
|
||||
// src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png'
|
||||
src: 'https://sjcdn.oss-cn-hangzhou.aliyuncs.com/image/1724755875530.png'
|
||||
}),
|
||||
start: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
|
||||
}),
|
||||
end: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
|
||||
})
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: 'car',
|
||||
styleId: 'car-down',
|
||||
position: e[0],
|
||||
content: '川S8888' // 标记显示内容
|
||||
},
|
||||
{
|
||||
id: 'start',
|
||||
styleId: 'start',
|
||||
position: e[0]
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
export { init, latLng, search, geocoder, multiPolyline, multiPolyline1, multiMarker, marker };
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/cst/station/Station.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
paging(data: StationTypes.SearchStationParam) {
|
||||
return get<G.PageResult<StationTypes.SearchStationResult>>('/station/paging', data)
|
||||
},
|
||||
detail(id: string) {
|
||||
return get<StationTypes.SearchStationResult>('/station/detail', {id})
|
||||
},
|
||||
add(data: StationTypes.AddStationParam) {
|
||||
return post('/station/add', data)
|
||||
},
|
||||
modify(data: StationTypes.ModifyStationParam) {
|
||||
return post('/station/modify', data)
|
||||
},
|
||||
del(ids: string[]) {
|
||||
return post('/station/del', ids)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
export {}
|
||||
|
||||
declare global {
|
||||
namespace StationTypes {
|
||||
interface SearchStationParam extends G.PageParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 组织信息 Id
|
||||
orgId?: string
|
||||
// 站点名称
|
||||
stationName?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface SearchStationResult {
|
||||
// Id
|
||||
id?: string
|
||||
// 组织信息 Id
|
||||
orgId?: string
|
||||
// 站点名称
|
||||
stationName?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface AddStationParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 组织信息 Id
|
||||
orgId?: string
|
||||
// 站点名称
|
||||
stationName?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface ModifyStationParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 组织信息 Id
|
||||
orgId?: string
|
||||
// 站点名称
|
||||
stationName?: string
|
||||
// 省；代码
|
||||
province?: string
|
||||
// 市；代码
|
||||
city?: string
|
||||
// 区县；代码
|
||||
area?: string
|
||||
// 乡镇街道；代码
|
||||
town?: string
|
||||
// 省；名称
|
||||
provinceName?: string
|
||||
// 市；名称
|
||||
cityName?: string
|
||||
// 区县；名称
|
||||
areaName?: string
|
||||
// 乡镇街道；名称
|
||||
townName?: string
|
||||
// 详细地址
|
||||
address?: string
|
||||
// 经度
|
||||
lng?: number
|
||||
// 纬度
|
||||
lat?: number
|
||||
// 创建人 Id； sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id； sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除； 0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +1,15 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<ElFormItem label="Id">
|
||||
<ElInput
|
||||
v-model="searchForm.id"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他">
|
||||
<!-- <ElFormItem label="业务类型">
|
||||
<ElInput
|
||||
v-model="searchForm.bizType"
|
||||
placeholder="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他"/>
|
||||
</ElFormItem>
|
||||
placeholder="业务类型"/>
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label="分类名称">
|
||||
<ElInput
|
||||
v-model="searchForm.categoryName"
|
||||
placeholder="分类名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="图片">
|
||||
<ElInput
|
||||
v-model="searchForm.picture"
|
||||
placeholder="图片"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序">
|
||||
<ElInput
|
||||
v-model="searchForm.sort"
|
||||
placeholder="排序"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建人 Id；sys_user.id">
|
||||
<ElInput
|
||||
v-model="searchForm.creatorId"
|
||||
placeholder="创建人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改人 Id；sys_user.id">
|
||||
<ElInput
|
||||
v-model="searchForm.modifierId"
|
||||
placeholder="修改人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建时间">
|
||||
<ElInput
|
||||
v-model="searchForm.createTime"
|
||||
placeholder="创建时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间">
|
||||
<ElInput
|
||||
v-model="searchForm.modifyTime"
|
||||
placeholder="修改时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否删除； 0-->未删除、1-->已删除">
|
||||
<ElInput
|
||||
v-model="searchForm.deleted"
|
||||
placeholder="是否删除； 0-->未删除、1-->已删除"/>
|
||||
<ElInput v-model="searchForm.categoryName" placeholder="分类名称" />
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
|
|
@ -62,34 +21,21 @@
|
|||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
|
||||
</div>
|
||||
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
|
||||
<ElTableColumn label="Id" prop="id" />
|
||||
<ElTableColumn label="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他" prop="bizType"/>
|
||||
<ElTableColumn label="业务类型" prop="bizTypeName" />
|
||||
<ElTableColumn label="分类名称" prop="categoryName" />
|
||||
<ElTableColumn label="图片" prop="picture"/>
|
||||
<ElTableColumn label="排序" prop="sort"/>
|
||||
<ElTableColumn label="创建人 Id；sys_user.id" prop="creatorId"/>
|
||||
<ElTableColumn label="修改人 Id；sys_user.id" prop="modifierId"/>
|
||||
<ElTableColumn label="图片" prop="picture">
|
||||
<template #default="{ row }">
|
||||
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="创建时间" prop="createTime" />
|
||||
<ElTableColumn label="修改时间" prop="modifyTime" />
|
||||
<ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElPopconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
confirm-button-type="danger"
|
||||
cancel-button-type="primary"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||
</template>
|
||||
|
|
@ -99,81 +45,75 @@
|
|||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination
|
||||
layout="->, sizes, total, prev, pager, next"
|
||||
v-model:current-page="searchForm.current"
|
||||
v-model:page-size="searchForm.size"
|
||||
:total="totalCount"
|
||||
:page-sizes="[10, 20, 50, 100, 500]"
|
||||
:hide-on-single-page="false"
|
||||
:teleported="false"
|
||||
@change="paging"/>
|
||||
<ElPagination layout="->, sizes, total, prev, pager, next" v-model:current-page="searchForm.current" v-model:page-size="searchForm.size" :total="totalCount" :page-sizes="[10, 20, 50, 100, 500]" :hide-on-single-page="false" :teleported="false" @change="paging" />
|
||||
<GoodsCategoryForm ref="goodsCategoryForm" @edit-succ="paging" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
||||
import GoodsCategoryForm from '@/pages/gds/goods-category/GoodsCategoryForm.vue'
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
|
||||
import GoodsCategoryForm from "@/pages/gds/goods-category/GoodsCategoryForm.vue";
|
||||
import Page from "@/components/page/Page.vue";
|
||||
import { elIcons } from "@/common/element/element.ts";
|
||||
import Utils from "@/common/utils";
|
||||
import AppApi from "@/common/app/app-api.ts";
|
||||
|
||||
const totalCount = ref(0)
|
||||
const tableData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([]))
|
||||
const searchForm = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryParam>({
|
||||
const totalCount = ref(0);
|
||||
const tableData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([]));
|
||||
const searchForm = Utils.resetAble(
|
||||
reactive<GoodsCategoryTypes.SearchGoodsCategoryParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
}))
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
|
||||
})
|
||||
);
|
||||
const searching = ref(false);
|
||||
const deling = ref(false);
|
||||
const showSearchForm = ref(true);
|
||||
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>("goodsCategoryForm");
|
||||
|
||||
function showDialog(data?: GoodsCategoryTypes.SearchGoodsCategoryResult) {
|
||||
goodsCategoryFormIns.value?.open(data)
|
||||
goodsCategoryFormIns.value?.open(data);
|
||||
}
|
||||
|
||||
function delHandler({ row }: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
|
||||
deling.value = true
|
||||
deling.value = true;
|
||||
GoodsCategoryApi.del([row.id!])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
ElMessage.success("删除成功");
|
||||
paging();
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
})
|
||||
deling.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function modifyHandler({ row }: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
|
||||
showDialog(row)
|
||||
showDialog(row);
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog()
|
||||
showDialog();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
searchForm.$reset()
|
||||
paging()
|
||||
searchForm.$reset();
|
||||
paging();
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
searching.value = true;
|
||||
GoodsCategoryApi.paging(searchForm)
|
||||
.then(res => {
|
||||
totalCount.value = res.data?.total ?? 0
|
||||
tableData.$reset(res.data?.records ?? [])
|
||||
.then((res) => {
|
||||
totalCount.value = res.data?.total ?? 0;
|
||||
tableData.$reset(res.data?.records ?? []);
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
searching.value = false;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
|
||||
paging();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
|
|
|||
|
|
@ -1,159 +1,129 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="fit-content"
|
||||
@close="dialogCloseHandler">
|
||||
<ElForm :model="formData"
|
||||
:rules="rules"
|
||||
ref="goodsCategoryForm"
|
||||
class="form-panel"
|
||||
label-width="auto">
|
||||
<ElFormItem label="Id" prop="id">
|
||||
<ElInput
|
||||
v-model="formData.id"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他" prop="bizType">
|
||||
<ElInput
|
||||
v-model="formData.bizType"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他"/>
|
||||
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
|
||||
<ElForm :model="formData" :rules="rules" ref="goodsCategoryForm" class="form-panel" label-width="auto">
|
||||
<ElFormItem label="业务类型" prop="bizType">
|
||||
<!-- <ElInput /> -->
|
||||
<!-- ：biz_type，ZaiShengPin-再生品、HuiShouPin-回收品、QiTa其他" -->
|
||||
|
||||
<el-select v-model="formData.bizType" :disabled="status === 'view'" placeholder="业务类型" style="width: 240px">
|
||||
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="分类名称" prop="categoryName">
|
||||
<ElInput
|
||||
v-model="formData.categoryName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="分类名称"/>
|
||||
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="图片" prop="picture">
|
||||
<ElInput
|
||||
<!-- <ElInput
|
||||
v-model="formData.picture"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="图片"/>
|
||||
placeholder="图片"/> -->
|
||||
<Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
|
||||
<span style="font-size: 50px; padding: 0 40px">+</span>
|
||||
|
||||
<!-- <ElButton>点击上传图片</ElButton> -->
|
||||
</Uploader>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序" prop="sort">
|
||||
<ElInput
|
||||
v-model="formData.sort"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="排序"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
|
||||
<ElInput
|
||||
v-model="formData.creatorId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="创建人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改人 Id；sys_user.id" prop="modifierId">
|
||||
<ElInput
|
||||
v-model="formData.modifierId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="修改人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建时间" prop="createTime">
|
||||
<ElInput
|
||||
v-model="formData.createTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="创建时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间" prop="modifyTime">
|
||||
<ElInput
|
||||
v-model="formData.modifyTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="修改时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
|
||||
<ElInput
|
||||
v-model="formData.deleted"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否删除； 0-->未删除、1-->已删除"/>
|
||||
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="排序" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import FormUtil from '@/common/utils/formUtil.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import {
|
||||
ElMessage,
|
||||
type FormInstance,
|
||||
type FormRules,
|
||||
} from 'element-plus'
|
||||
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
|
||||
import Strings from "@/common/utils/strings.ts";
|
||||
import FormUtil from "@/common/utils/formUtil.ts";
|
||||
import Uploader from "@/components/uploader/Uploader.vue";
|
||||
|
||||
const emits = defineEmits(['editSucc'])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
import Utils from "@/common/utils";
|
||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||
|
||||
const goodsCategoryFormIns = useTemplateRef<FormInstance>('goodsCategoryForm')
|
||||
const emits = defineEmits(["editSucc"]);
|
||||
const showDialog = ref(false);
|
||||
const submiting = ref(false);
|
||||
const status = ref<"add" | "view" | "modify">("add");
|
||||
|
||||
const formData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult>({}))
|
||||
const goodsCategoryFormIns = useTemplateRef<FormInstance>("goodsCategoryForm");
|
||||
|
||||
const bizList = [
|
||||
{
|
||||
value: "ZaiShengPin",
|
||||
label: "再生品",
|
||||
},
|
||||
{
|
||||
value: "HuiShouPin",
|
||||
label: "回收品",
|
||||
},
|
||||
{
|
||||
value: "QiTa",
|
||||
label: "其他",
|
||||
},
|
||||
];
|
||||
|
||||
const formData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult>({}));
|
||||
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
|
||||
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
|
||||
bizType: [{ required: true, message: '请填写业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他', trigger: 'blur' }],
|
||||
categoryName: [{ required: true, message: '请填写分类名称', trigger: 'blur' }],
|
||||
picture: [{ required: true, message: '请填写图片', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请填写排序', trigger: 'blur' }],
|
||||
creatorId: [{ required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur' }],
|
||||
modifierId: [{ required: true, message: '请填写修改人 Id；sys_user.id', trigger: 'blur' }],
|
||||
createTime: [{ required: true, message: '请填写创建时间', trigger: 'blur' }],
|
||||
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
|
||||
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
|
||||
})
|
||||
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||||
bizType: [{ required: true, message: "请填写业务类型", trigger: "blur" }],
|
||||
categoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||||
picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
|
||||
sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
|
||||
creatorId: [{ required: true, message: "请填写创建人 Id；sys_user.id", trigger: "blur" }],
|
||||
modifierId: [{ required: true, message: "请填写修改人 Id；sys_user.id", trigger: "blur" }],
|
||||
createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
|
||||
modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
|
||||
deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
|
||||
});
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.$reset()
|
||||
formData.$reset();
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (status.value === "view") return;
|
||||
submiting.value = true;
|
||||
if (formData.id != null) {
|
||||
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.modify(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
ElMessage.success("修改成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
submiting.value = false;
|
||||
});
|
||||
} else {
|
||||
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.add(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
ElMessage.success("添加成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
submiting.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: GoodsCategoryTypes.SearchGoodsCategoryResult = {}) {
|
||||
showDialog.value = true
|
||||
showDialog.value = true;
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
GoodsCategoryApi.detail(data.id!)
|
||||
.then(res => {
|
||||
formData.$reset(res.data)
|
||||
})
|
||||
status.value = "modify";
|
||||
GoodsCategoryApi.detail(data.id!).then((res) => {
|
||||
formData.$reset(res.data);
|
||||
});
|
||||
} else {
|
||||
status.value = 'add'
|
||||
formData.$reset(data)
|
||||
status.value = "add";
|
||||
formData.$reset(data);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ declare global {
|
|||
|
||||
interface SearchGoodsCategoryResult {
|
||||
// Id
|
||||
id?: string
|
||||
id: string
|
||||
// 业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他
|
||||
bizType?: string
|
||||
// 分类名称
|
||||
|
|
|
|||
|
|
@ -1,95 +1,53 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<ElFormItem label="Id">
|
||||
<ElInput
|
||||
v-model="searchForm.id"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="产品类型 Id">
|
||||
<ElInput
|
||||
v-model="searchForm.goodsCategoryId"
|
||||
placeholder="产品类型 Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="商品编码">
|
||||
<ElInput
|
||||
v-model="searchForm.sn"
|
||||
placeholder="商品编码"/>
|
||||
<ElInput v-model="searchForm.sn" placeholder="商品编码" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="产品名称">
|
||||
<ElInput
|
||||
v-model="searchForm.goodsName"
|
||||
placeholder="产品名称"/>
|
||||
<ElInput v-model="searchForm.goodsName" placeholder="产品名称" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="规格">
|
||||
<ElInput
|
||||
v-model="searchForm.specParams"
|
||||
placeholder="规格"/>
|
||||
<ElInput v-model="searchForm.specParams" placeholder="规格" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="图片">
|
||||
<ElInput
|
||||
v-model="searchForm.picture"
|
||||
placeholder="图片"/>
|
||||
<!-- ；字典代码：unit -->
|
||||
<ElFormItem label="计量单位">
|
||||
<ElInput v-model="searchForm.unit" placeholder="计量单位" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="计量单位；字典代码：unit">
|
||||
<ElInput
|
||||
v-model="searchForm.unit"
|
||||
placeholder="计量单位；字典代码：unit"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否为成品；0-->否、1-->是">
|
||||
<!-- <ElFormItem label="是否为成品">
|
||||
<ElInput
|
||||
v-model="searchForm.fg"
|
||||
placeholder="是否为成品；0-->否、1-->是"/>
|
||||
placeholder="是否为成品"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否为半成品；0-->否、1-->是">
|
||||
<ElFormItem label="是否为半成品">
|
||||
<ElInput
|
||||
v-model="searchForm.sfg"
|
||||
placeholder="是否为半成品；0-->否、1-->是"/>
|
||||
placeholder="是否为半成品"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否为原料；0-->否、1-->是">
|
||||
<ElFormItem label="是否为原料">
|
||||
<ElInput
|
||||
v-model="searchForm.rg"
|
||||
placeholder="是否为原料；0-->否、1-->是"/>
|
||||
placeholder="是否为原料"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序">
|
||||
<ElInput
|
||||
v-model="searchForm.sort"
|
||||
placeholder="排序"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否可用；0-->否、1-->是">
|
||||
<ElFormItem label="是否可用">
|
||||
<ElInput
|
||||
v-model="searchForm.canuse"
|
||||
placeholder="是否可用；0-->否、1-->是"/>
|
||||
</ElFormItem>
|
||||
placeholder="是否可用"/>
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label="备注">
|
||||
<ElInput
|
||||
v-model="searchForm.memo"
|
||||
placeholder="备注"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建人 Id；sys_user.id">
|
||||
<ElInput
|
||||
v-model="searchForm.creatorId"
|
||||
placeholder="创建人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改人 Id；sys_user.id">
|
||||
<ElInput
|
||||
v-model="searchForm.modifierId"
|
||||
placeholder="修改人 Id；sys_user.id"/>
|
||||
<ElInput v-model="searchForm.memo" placeholder="备注" />
|
||||
</ElFormItem>
|
||||
|
||||
<ElFormItem label="创建时间">
|
||||
<ElInput
|
||||
v-model="searchForm.createTime"
|
||||
placeholder="创建时间"/>
|
||||
<ElInput v-model="searchForm.createTime" placeholder="创建时间" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间">
|
||||
<ElInput
|
||||
v-model="searchForm.modifyTime"
|
||||
placeholder="修改时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否删除； 0-->未删除、1-->已删除">
|
||||
<ElInput
|
||||
v-model="searchForm.deleted"
|
||||
placeholder="是否删除； 0-->未删除、1-->已删除"/>
|
||||
<ElInput v-model="searchForm.modifyTime" placeholder="修改时间" />
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
|
|
@ -102,42 +60,45 @@
|
|||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
|
||||
</div>
|
||||
|
||||
<ElTable v-loading="searching" :data="tableData"
|
||||
cell-class-name="table-cell"
|
||||
class="table-list"
|
||||
empty-text="暂无数据"
|
||||
header-row-class-name="table-header"
|
||||
row-key="id">
|
||||
<ElTableColumn label="Id" prop="id"/>
|
||||
<ElTableColumn label="产品类型 Id" prop="goodsCategoryId"/>
|
||||
<ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
|
||||
<!-- <ElTableColumn label="产品类型" prop="goodsCategoryId" /> -->
|
||||
<ElTableColumn label="商品编码" prop="sn" />
|
||||
<ElTableColumn label="产品名称" prop="goodsName" />
|
||||
<ElTableColumn label="规格" prop="specParams" />
|
||||
<ElTableColumn label="图片" prop="picture"/>
|
||||
<ElTableColumn label="计量单位；字典代码：unit" prop="unit"/>
|
||||
<ElTableColumn label="是否为成品；0-->否、1-->是" prop="fg"/>
|
||||
<ElTableColumn label="是否为半成品；0-->否、1-->是" prop="sfg"/>
|
||||
<ElTableColumn label="是否为原料；0-->否、1-->是" prop="rg"/>
|
||||
<ElTableColumn label="排序" prop="sort"/>
|
||||
<ElTableColumn label="是否可用；0-->否、1-->是" prop="canuse"/>
|
||||
<ElTableColumn label="图片" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<!-- <ElTableColumn label="计量单位" prop="unit" /> -->
|
||||
<ElTableColumn label="是否为成品" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.fg ? "是" : "否" }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
|
||||
<ElTableColumn label="是否为半成品" width="120">
|
||||
<template #default="{ row }">
|
||||
{{ row.sfg ? "是" : "否" }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="是否为原料" prop="rg" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.rg ? "是" : "否" }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="是否可用" prop="canuse">
|
||||
<template #default="{ row }">
|
||||
{{ row.canuse ? "是" : "否" }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="备注" prop="memo" />
|
||||
<ElTableColumn label="创建人 Id；sys_user.id" prop="creatorId"/>
|
||||
<ElTableColumn label="修改人 Id；sys_user.id" prop="modifierId"/>
|
||||
<ElTableColumn label="创建时间" prop="createTime"/>
|
||||
<ElTableColumn label="修改时间" prop="modifyTime"/>
|
||||
<ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<ElTableColumn label="创建时间" prop="createTime" width="160" />
|
||||
<ElTableColumn label="修改时间" prop="modifyTime" width="160" />
|
||||
<ElTableColumn label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElPopconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
confirm-button-type="danger"
|
||||
cancel-button-type="primary"
|
||||
placement="top"
|
||||
title="是否删除当前数据?"
|
||||
width="180"
|
||||
@confirm="delHandler(scope)">
|
||||
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||
</template>
|
||||
|
|
@ -147,81 +108,75 @@
|
|||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination
|
||||
layout="->, sizes, total, prev, pager, next"
|
||||
v-model:current-page="searchForm.current"
|
||||
v-model:page-size="searchForm.size"
|
||||
:total="totalCount"
|
||||
:page-sizes="[10, 20, 50, 100, 500]"
|
||||
:hide-on-single-page="false"
|
||||
:teleported="false"
|
||||
@change="paging"/>
|
||||
<ElPagination layout="->, sizes, total, prev, pager, next" v-model:current-page="searchForm.current" v-model:page-size="searchForm.size" :total="totalCount" :page-sizes="[10, 20, 50, 100, 500]" :hide-on-single-page="false" :teleported="false" @change="paging" />
|
||||
<GoodsForm ref="goodsForm" @edit-succ="paging" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
||||
import GoodsForm from '@/pages/gds/goods/GoodsForm.vue'
|
||||
import Page from '@/components/page/Page.vue'
|
||||
import { elIcons } from '@/common/element/element.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
|
||||
import GoodsForm from "@/pages/gds/goods/GoodsForm.vue";
|
||||
import Page from "@/components/page/Page.vue";
|
||||
import { elIcons } from "@/common/element/element.ts";
|
||||
import Utils from "@/common/utils";
|
||||
import AppApi from "@/common/app/app-api.ts";
|
||||
|
||||
const totalCount = ref(0)
|
||||
const tableData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult[]>([]))
|
||||
const searchForm = Utils.resetAble(reactive<GoodsTypes.SearchGoodsParam>({
|
||||
const totalCount = ref(0);
|
||||
const tableData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult[]>([]));
|
||||
const searchForm = Utils.resetAble(
|
||||
reactive<GoodsTypes.SearchGoodsParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
}))
|
||||
const searching = ref(false)
|
||||
const deling = ref(false)
|
||||
const showSearchForm = ref(true)
|
||||
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')
|
||||
})
|
||||
);
|
||||
const searching = ref(false);
|
||||
const deling = ref(false);
|
||||
const showSearchForm = ref(true);
|
||||
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>("goodsForm");
|
||||
|
||||
function showDialog(data?: GoodsTypes.SearchGoodsResult) {
|
||||
goodsFormIns.value?.open(data)
|
||||
goodsFormIns.value?.open(data);
|
||||
}
|
||||
|
||||
function delHandler({ row }: { row: GoodsTypes.SearchGoodsResult }) {
|
||||
deling.value = true
|
||||
deling.value = true;
|
||||
GoodsApi.del([row.id!])
|
||||
.then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
paging()
|
||||
ElMessage.success("删除成功");
|
||||
paging();
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false
|
||||
})
|
||||
deling.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function modifyHandler({ row }: { row: GoodsTypes.SearchGoodsResult }) {
|
||||
showDialog(row)
|
||||
showDialog(row);
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog()
|
||||
showDialog();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
searchForm.$reset()
|
||||
paging()
|
||||
searchForm.$reset();
|
||||
paging();
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true
|
||||
searching.value = true;
|
||||
GoodsApi.paging(searchForm)
|
||||
.then(res => {
|
||||
totalCount.value = res.data?.total ?? 0
|
||||
tableData.$reset(res.data?.records ?? [])
|
||||
.then((res) => {
|
||||
totalCount.value = res.data?.total ?? 0;
|
||||
tableData.$reset(res.data?.records ?? []);
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false
|
||||
})
|
||||
searching.value = false;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
paging()
|
||||
})
|
||||
|
||||
paging();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
|
|
|||
|
|
@ -1,215 +1,166 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
width="fit-content"
|
||||
@close="dialogCloseHandler">
|
||||
<ElForm :model="formData"
|
||||
:rules="rules"
|
||||
ref="goodsForm"
|
||||
class="form-panel"
|
||||
label-width="auto">
|
||||
<ElFormItem label="Id" prop="id">
|
||||
<ElInput
|
||||
v-model="formData.id"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="产品类型 Id" prop="goodsCategoryId">
|
||||
<ElInput
|
||||
v-model="formData.goodsCategoryId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="产品类型 Id"/>
|
||||
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
|
||||
<ElForm :model="formData" :rules="rules" ref="goodsForm" class="form-panel" label-width="auto">
|
||||
<ElFormItem label="产品类型" prop="goodsCategoryId">
|
||||
<!-- <ElInput v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型 Id" /> -->
|
||||
<el-select v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型" filterable remote reserve-keyword remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
|
||||
<el-option v-for="item in category" :key="item.id" :label="item.categoryName" :value="item.id" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="商品编码" prop="sn">
|
||||
<ElInput
|
||||
v-model="formData.sn"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="商品编码"/>
|
||||
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="产品名称" prop="goodsName">
|
||||
<ElInput
|
||||
v-model="formData.goodsName"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="产品名称"/>
|
||||
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="规格" prop="specParams">
|
||||
<ElInput
|
||||
v-model="formData.specParams"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="规格"/>
|
||||
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="图片" prop="picture">
|
||||
<ElInput
|
||||
v-model="formData.picture"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="图片"/>
|
||||
<Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
|
||||
<span style="font-size: 50px; padding: 0 40px">+</span>
|
||||
</Uploader>
|
||||
<!-- <ElInput v-model="formData.picture" :disabled="status === 'view'" placeholder="图片" /> -->
|
||||
</ElFormItem>
|
||||
<ElFormItem label="计量单位；字典代码：unit" prop="unit">
|
||||
<ElInput
|
||||
v-model="formData.unit"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="计量单位；字典代码：unit"/>
|
||||
<ElFormItem label="计量单位" prop="unit">
|
||||
<!-- <ElInput v-model="formData.unit" :disabled="status === 'view'" placeholder="计量单位" /> -->
|
||||
|
||||
<el-select v-model="formData.unit" :disabled="status === 'view'" placeholder="产品类型" filterable remote reserve-keyword remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
|
||||
<el-option v-for="item in unitList" :key="item.id" :label="item.txt" :value="item.val" />
|
||||
</el-select>
|
||||
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否为成品；0-->否、1-->是" prop="fg">
|
||||
<ElInput
|
||||
v-model="formData.fg"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否为成品；0-->否、1-->是"/>
|
||||
<ElFormItem label="是否为成品" prop="fg">
|
||||
<el-switch v-model="formData.fg" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否为半成品；0-->否、1-->是" prop="sfg">
|
||||
<ElInput
|
||||
v-model="formData.sfg"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否为半成品；0-->否、1-->是"/>
|
||||
<ElFormItem label="是否为半成品" prop="sfg">
|
||||
<el-switch v-model="formData.sfg" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否为原料；0-->否、1-->是" prop="rg">
|
||||
<ElInput
|
||||
v-model="formData.rg"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否为原料；0-->否、1-->是"/>
|
||||
<ElFormItem label="是否为原料" prop="rg">
|
||||
<el-switch v-model="formData.rg" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="排序" prop="sort">
|
||||
<ElInput
|
||||
v-model="formData.sort"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="排序"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否可用；0-->否、1-->是" prop="canuse">
|
||||
<ElInput
|
||||
v-model="formData.canuse"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否可用；0-->否、1-->是"/>
|
||||
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="备注" prop="memo">
|
||||
<ElInput
|
||||
v-model="formData.memo"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="备注"/>
|
||||
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
|
||||
<ElInput
|
||||
v-model="formData.creatorId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="创建人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改人 Id；sys_user.id" prop="modifierId">
|
||||
<ElInput
|
||||
v-model="formData.modifierId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="修改人 Id；sys_user.id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建时间" prop="createTime">
|
||||
<ElInput
|
||||
v-model="formData.createTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="创建时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间" prop="modifyTime">
|
||||
<ElInput
|
||||
v-model="formData.modifyTime"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="修改时间"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
|
||||
<ElInput
|
||||
v-model="formData.deleted"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否删除； 0-->未删除、1-->已删除"/>
|
||||
<ElFormItem label="是否可用" prop="canuse">
|
||||
<el-switch v-model="formData.canuse" :disabled="status === 'view'" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
||||
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
||||
import Strings from '@/common/utils/strings.ts'
|
||||
import FormUtil from '@/common/utils/formUtil.ts'
|
||||
import Utils from '@/common/utils'
|
||||
import {
|
||||
ElMessage,
|
||||
type FormInstance,
|
||||
type FormRules,
|
||||
} from 'element-plus'
|
||||
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
|
||||
import Strings from "@/common/utils/strings.ts";
|
||||
import FormUtil from "@/common/utils/formUtil.ts";
|
||||
import Utils from "@/common/utils";
|
||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||
import Uploader from "@/components/uploader/Uploader.vue";
|
||||
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
|
||||
import DictApi from "@/pages/sys/dict/dict-api.ts";
|
||||
|
||||
const emits = defineEmits(['editSucc'])
|
||||
const showDialog = ref(false)
|
||||
const submiting = ref(false)
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
const emits = defineEmits(["editSucc"]);
|
||||
const showDialog = ref(false);
|
||||
const submiting = ref(false);
|
||||
const status = ref<"add" | "view" | "modify">("add");
|
||||
|
||||
const goodsFormIns = useTemplateRef<FormInstance>('goodsForm')
|
||||
const goodsFormIns = useTemplateRef<FormInstance>("goodsForm");
|
||||
|
||||
const formData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult>({}))
|
||||
const formData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult>({ canuse: true }));
|
||||
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
|
||||
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
|
||||
goodsCategoryId: [{ required: true, message: '请填写产品类型 Id', trigger: 'blur' }],
|
||||
sn: [{ required: true, message: '请填写商品编码', trigger: 'blur' }],
|
||||
goodsName: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
|
||||
specParams: [{ required: true, message: '请填写规格', trigger: 'blur' }],
|
||||
picture: [{ required: true, message: '请填写图片', trigger: 'blur' }],
|
||||
unit: [{ required: true, message: '请填写计量单位；字典代码：unit', trigger: 'blur' }],
|
||||
fg: [{ required: true, message: '请填写是否为成品；0-->否、1-->是', trigger: 'blur' }],
|
||||
sfg: [{ required: true, message: '请填写是否为半成品；0-->否、1-->是', trigger: 'blur' }],
|
||||
rg: [{ required: true, message: '请填写是否为原料；0-->否、1-->是', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请填写排序', trigger: 'blur' }],
|
||||
canuse: [{ required: true, message: '请填写是否可用；0-->否、1-->是', trigger: 'blur' }],
|
||||
memo: [{ required: true, message: '请填写备注', trigger: 'blur' }],
|
||||
creatorId: [{ required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur' }],
|
||||
modifierId: [{ required: true, message: '请填写修改人 Id；sys_user.id', trigger: 'blur' }],
|
||||
createTime: [{ required: true, message: '请填写创建时间', trigger: 'blur' }],
|
||||
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
|
||||
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
|
||||
})
|
||||
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||||
goodsCategoryId: [{ required: true, message: "请填写产品类型", trigger: "blur" }],
|
||||
sn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
||||
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||||
specParams: [{ required: true, message: "请填写规格", trigger: "blur" }],
|
||||
picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
|
||||
unit: [{ required: true, message: "请填写计量单位", trigger: "blur" }],
|
||||
fg: [{ required: true, message: "请填写是否为成品", trigger: "blur" }],
|
||||
sfg: [{ required: true, message: "请填写是否为半成品", trigger: "blur" }],
|
||||
rg: [{ required: true, message: "请填写是否为原料", trigger: "blur" }],
|
||||
sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
|
||||
});
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.$reset()
|
||||
formData.$reset();
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === 'view') return
|
||||
submiting.value = true
|
||||
if (status.value === "view") return;
|
||||
submiting.value = true;
|
||||
if (formData.id != null) {
|
||||
FormUtil.submit(goodsFormIns, () => GoodsApi.modify(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
ElMessage.success("修改成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
submiting.value = false;
|
||||
});
|
||||
} else {
|
||||
FormUtil.submit(goodsFormIns, () => GoodsApi.add(formData))
|
||||
.then(() => {
|
||||
ElMessage.success('添加成功')
|
||||
emits('editSucc')
|
||||
showDialog.value = false
|
||||
ElMessage.success("添加成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false
|
||||
})
|
||||
submiting.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const category = ref<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([]);
|
||||
|
||||
const loading = ref(false);
|
||||
const remoteMethod = (query: string) => {
|
||||
console.log(query, "query");
|
||||
loading.value = true;
|
||||
GoodsCategoryApi.paging({ size: 50, categoryName: query || undefined }).then((res) => {
|
||||
category.value = res.data.records;
|
||||
loading.value = false;
|
||||
// category.value = list.value.filter((item) => {
|
||||
// return item.label.toLowerCase().includes(query.toLowerCase())
|
||||
// })
|
||||
});
|
||||
// } else {
|
||||
// category.value = [];
|
||||
// }
|
||||
};
|
||||
const unitList=ref<DictItemTypes.SearchDictItemResult[]>([])
|
||||
const getOpt = () => {
|
||||
let searchForm = {
|
||||
dictKey: "unit",
|
||||
};
|
||||
DictApi.obtainDictData(searchForm).then((res) => {
|
||||
// console.log(res.data);
|
||||
unitList.value=res.data
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open(data: GoodsTypes.SearchGoodsResult = {}) {
|
||||
showDialog.value = true
|
||||
showDialog.value = true;
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = 'modify'
|
||||
GoodsApi.detail(data.id!)
|
||||
.then(res => {
|
||||
formData.$reset(res.data)
|
||||
})
|
||||
status.value = "modify";
|
||||
GoodsApi.detail(data.id!).then((res) => {
|
||||
formData.$reset(res.data);
|
||||
});
|
||||
} else {
|
||||
status.value = 'add'
|
||||
formData.$reset(data)
|
||||
status.value = "add";
|
||||
formData.$reset(data);
|
||||
}
|
||||
}
|
||||
})
|
||||
getOpt();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
|
|
|||
|
|
@ -65,13 +65,13 @@ declare global {
|
|||
|
||||
interface SearchDictItemResult {
|
||||
// Id
|
||||
id?: string
|
||||
id: string
|
||||
// 字典 Id
|
||||
dictId?: string
|
||||
// 字典标识
|
||||
dictKey?: string
|
||||
// 值
|
||||
val?: string
|
||||
val: string
|
||||
// 显示文本
|
||||
txt?: string
|
||||
// 排序
|
||||
|
|
|
|||
Loading…
Reference in New Issue