lzq
/
njzscloud-dispose-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加站点页面，公司列表页面

master
wangjunjie 2025-12-22 19:53:47 +08:00
parent 135b96fa6e
commit 74ecc7b357
18 changed files with 1987 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -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;

213
src/pages/cst/org/Org.vue 100644
View File

@ -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>

296
src/pages/cst/org/OrgForm.vue 100644
View File

@ -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>

22
src/pages/cst/org/org-api.ts 100644
View File

@ -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)
},
}

249
src/pages/cst/org/org.d.ts vendored 100644
View File

@ -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
}
}
}

3
src/pages/cst/org/page.ts 100644
View File

@ -0,0 +1,3 @@
export default {
component: () => import('@/pages/cst/org/Org.vue'),
} as RouterTypes.RouteConfig

232
src/pages/cst/station/Station.vue 100644
View File

@ -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>

242
src/pages/cst/station/StationForm.vue 100644
View File

@ -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>

157
src/pages/cst/station/map.ts 100644
View File

@ -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 };

3
src/pages/cst/station/page.ts 100644
View File

@ -0,0 +1,3 @@
export default {
component: () => import('@/pages/cst/station/Station.vue'),
} as RouterTypes.RouteConfig

22
src/pages/cst/station/station-api.ts 100644
View File

@ -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)
},
}

169
src/pages/cst/station/station.d.ts vendored 100644
View File

@ -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
}
}
}

184
src/pages/gds/goods-category/GoodsCategory.vue
View File

@ -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>
<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-->已删除"/>
placeholder="业务类型"/>
</ElFormItem> -->
<ElFormItem label="分类名称">
<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>
@ -59,37 +18,24 @@
<div class="tool-bar">
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
<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="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他" prop="bizType"/>
<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="createTime"/>
<ElTableColumn label="修改时间" prop="modifyTime"/>
<ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
<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="业务类型" prop="bizTypeName" />
<ElTableColumn label="分类名称" prop="categoryName" />
<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="操作" 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"/>
<GoodsCategoryForm ref="goodsCategoryForm" @edit-succ="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>({
current: 1,
size: 20,
}))
const searching = ref(false)
const deling = ref(false)
const showSearchForm = ref(true)
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
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");
function showDialog(data?: GoodsCategoryTypes.SearchGoodsCategoryResult) {
goodsCategoryFormIns.value?.open(data)
goodsCategoryFormIns.value?.open(data);
}
function delHandler({row}: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
deling.value = true
GoodsCategoryApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
paging()
})
.finally(() => {
deling.value = false
function delHandler({ row }: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
deling.value = true;
GoodsCategoryApi.del([row.id!])
.then(() => {
ElMessage.success("删除成功");
paging();
})
.finally(() => {
deling.value = false;
});
}
function modifyHandler({row}: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
showDialog(row)
function modifyHandler({ row }: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
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>

202
src/pages/gds/goods-category/GoodsCategoryForm.vue
View File

@ -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"/>
<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="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他" prop="bizType">
<ElInput
v-model="formData.bizType"
:disabled="status === 'view'"
placeholder="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他"/>
<ElFormItem label="分类名称" prop="categoryName">
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称" />
</ElFormItem>
<ElFormItem label="分类名称" prop="categoryName">
<ElInput
v-model="formData.categoryName"
:disabled="status === 'view'"
placeholder="分类名称"/>
</ElFormItem>
<ElFormItem label="图片" prop="picture">
<ElInput
<ElFormItem label="图片" prop="picture">
<!-- <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-->已删除"/>
<ElFormItem label="排序" prop="sort">
<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))
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))
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>

2
src/pages/gds/goods-category/goods-category.d.ts vendored
View File

@ -27,7 +27,7 @@ declare global {
interface SearchGoodsCategoryResult {
// Id
id?: string
id: string
// 业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他
bizType?: string
// 分类名称

257
src/pages/gds/goods/Goods.vue
View File

@ -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 label="商品编码">
<ElInput v-model="searchForm.sn" placeholder="商品编码" />
</ElFormItem>
<ElFormItem label="产品类型 Id">
<ElInput
v-model="searchForm.goodsCategoryId"
placeholder="产品类型 Id"/>
<ElFormItem label="产品名称">
<ElInput v-model="searchForm.goodsName" placeholder="产品名称" />
</ElFormItem>
<ElFormItem label="商品编码">
<ElInput
v-model="searchForm.sn"
placeholder="商品编码"/>
<ElFormItem label="规格">
<ElInput v-model="searchForm.specParams" placeholder="规格" />
</ElFormItem>
<ElFormItem label="产品名称">
<ElInput
v-model="searchForm.goodsName"
placeholder="产品名称"/>
<!-- ；字典代码：unit -->
<ElFormItem label="计量单位">
<ElInput v-model="searchForm.unit" placeholder="计量单位" />
</ElFormItem>
<ElFormItem label="规格">
<ElInput
v-model="searchForm.specParams"
placeholder="规格"/>
</ElFormItem>
<ElFormItem label="图片">
<ElInput
v-model="searchForm.picture"
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-->是"/>
placeholder="是否可用"/>
</ElFormItem> -->
<ElFormItem label="备注">
<ElInput v-model="searchForm.memo" placeholder="备注" />
</ElFormItem>
<ElFormItem label="备注">
<ElInput
v-model="searchForm.memo"
placeholder="备注"/>
<ElFormItem label="创建时间">
<ElInput v-model="searchForm.createTime" 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-->已删除"/>
<ElFormItem label="修改时间">
<ElInput v-model="searchForm.modifyTime" placeholder="修改时间" />
</ElFormItem>
<ElFormItem>
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
@ -99,45 +57,48 @@
<div class="tool-bar">
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm"/>
<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"/>
<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="备注" 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">
<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="图片" 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="创建时间" 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"/>
<GoodsForm ref="goodsForm" @edit-succ="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>({
current: 1,
size: 20,
}))
const searching = ref(false)
const deling = ref(false)
const showSearchForm = ref(true)
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')
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");
function showDialog(data?: GoodsTypes.SearchGoodsResult) {
goodsFormIns.value?.open(data)
goodsFormIns.value?.open(data);
}
function delHandler({row}: { row: GoodsTypes.SearchGoodsResult }) {
deling.value = true
GoodsApi.del([ row.id! ])
.then(() => {
ElMessage.success('删除成功')
paging()
})
.finally(() => {
deling.value = false
function delHandler({ row }: { row: GoodsTypes.SearchGoodsResult }) {
deling.value = true;
GoodsApi.del([row.id!])
.then(() => {
ElMessage.success("删除成功");
paging();
})
.finally(() => {
deling.value = false;
});
}
function modifyHandler({row}: { row: GoodsTypes.SearchGoodsResult }) {
showDialog(row)
function modifyHandler({ row }: { row: GoodsTypes.SearchGoodsResult }) {
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>

283
src/pages/gds/goods/GoodsForm.vue
View File

@ -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"/>
<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="产品类型 Id" prop="goodsCategoryId">
<ElInput
v-model="formData.goodsCategoryId"
:disabled="status === 'view'"
placeholder="产品类型 Id"/>
<ElFormItem label="商品编码" prop="sn">
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码" />
</ElFormItem>
<ElFormItem label="商品编码" prop="sn">
<ElInput
v-model="formData.sn"
:disabled="status === 'view'"
placeholder="商品编码"/>
<ElFormItem label="产品名称" prop="goodsName">
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称" />
</ElFormItem>
<ElFormItem label="产品名称" prop="goodsName">
<ElInput
v-model="formData.goodsName"
:disabled="status === 'view'"
placeholder="产品名称"/>
<ElFormItem label="规格" prop="specParams">
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格" />
</ElFormItem>
<ElFormItem label="规格" prop="specParams">
<ElInput
v-model="formData.specParams"
:disabled="status === 'view'"
placeholder="规格"/>
<ElFormItem label="图片" prop="picture">
<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="图片" prop="picture">
<ElInput
v-model="formData.picture"
:disabled="status === 'view'"
placeholder="图片"/>
<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="计量单位；字典代码：unit" prop="unit">
<ElInput
v-model="formData.unit"
:disabled="status === 'view'"
placeholder="计量单位；字典代码：unit"/>
<ElFormItem label="是否为成品" prop="fg">
<el-switch v-model="formData.fg" />
</ElFormItem>
<ElFormItem label="是否为成品；0-->否、1-->是" prop="fg">
<ElInput
v-model="formData.fg"
:disabled="status === 'view'"
placeholder="是否为成品；0-->否、1-->是"/>
<ElFormItem label="是否为半成品" prop="sfg">
<el-switch v-model="formData.sfg" />
</ElFormItem>
<ElFormItem label="是否为半成品；0-->否、1-->是" prop="sfg">
<ElInput
v-model="formData.sfg"
:disabled="status === 'view'"
placeholder="是否为半成品；0-->否、1-->是"/>
<ElFormItem label="是否为原料" prop="rg">
<el-switch v-model="formData.rg" />
</ElFormItem>
<ElFormItem label="是否为原料；0-->否、1-->是" prop="rg">
<ElInput
v-model="formData.rg"
:disabled="status === 'view'"
placeholder="是否为原料；0-->否、1-->是"/>
<ElFormItem label="排序" prop="sort">
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序" />
</ElFormItem>
<ElFormItem label="排序" prop="sort">
<ElInput
v-model="formData.sort"
:disabled="status === 'view'"
placeholder="排序"/>
<ElFormItem label="备注" prop="memo">
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注" />
</ElFormItem>
<ElFormItem label="是否可用；0-->否、1-->是" prop="canuse">
<ElInput
v-model="formData.canuse"
:disabled="status === 'view'"
placeholder="是否可用；0-->否、1-->是"/>
</ElFormItem>
<ElFormItem label="备注" prop="memo">
<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))
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))
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>

4
src/pages/sys/dict/dict.d.ts vendored
View File

@ -65,13 +65,13 @@ declare global {
interface SearchDictItemResult {
// Id
id?: string
id: string
// 字典 Id
dictId?: string
// 字典标识
dictKey?: string
// 值
val?: string
val: string
// 显示文本
txt?: string
// 排序