增加站点页面，公司列表页面
parent
135b96fa6e
commit
74ecc7b357
|
|
@ -4,6 +4,11 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
<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>
|
<style>
|
||||||
html {
|
html {
|
||||||
overflow: hidden;
|
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>
|
<template>
|
||||||
<Page>
|
<Page>
|
||||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||||
<ElFormItem label="Id">
|
<!-- <ElFormItem label="业务类型">
|
||||||
<ElInput
|
|
||||||
v-model="searchForm.id"
|
|
||||||
placeholder="Id"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他">
|
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.bizType"
|
v-model="searchForm.bizType"
|
||||||
placeholder="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他"/>
|
placeholder="业务类型"/>
|
||||||
</ElFormItem>
|
</ElFormItem> -->
|
||||||
<ElFormItem label="分类名称">
|
<ElFormItem label="分类名称">
|
||||||
<ElInput
|
<ElInput v-model="searchForm.categoryName" placeholder="分类名称" />
|
||||||
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-->已删除"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
|
|
||||||
<ElFormItem>
|
<ElFormItem>
|
||||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||||
|
|
@ -59,37 +18,24 @@
|
||||||
|
|
||||||
<div class="tool-bar">
|
<div class="tool-bar">
|
||||||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
<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>
|
</div>
|
||||||
|
|
||||||
<ElTable v-loading="searching" :data="tableData"
|
<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">
|
||||||
cell-class-name="table-cell"
|
<ElTableColumn label="Id" prop="id" />
|
||||||
class="table-list"
|
<ElTableColumn label="业务类型" prop="bizTypeName" />
|
||||||
empty-text="暂无数据"
|
<ElTableColumn label="分类名称" prop="categoryName" />
|
||||||
header-row-class-name="table-header"
|
<ElTableColumn label="图片" prop="picture">
|
||||||
row-key="id">
|
<template #default="{ row }">
|
||||||
<ElTableColumn label="Id" prop="id"/>
|
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||||
<ElTableColumn label="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他" prop="bizType"/>
|
</template>
|
||||||
<ElTableColumn label="分类名称" prop="categoryName"/>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="图片" prop="picture"/>
|
<ElTableColumn label="创建时间" prop="createTime" />
|
||||||
<ElTableColumn label="排序" prop="sort"/>
|
<ElTableColumn label="修改时间" prop="modifyTime" />
|
||||||
<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="操作" width="180">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="action-btn">
|
<div class="action-btn">
|
||||||
<ElPopconfirm
|
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||||||
confirm-button-text="是"
|
|
||||||
cancel-button-text="否"
|
|
||||||
confirm-button-type="danger"
|
|
||||||
cancel-button-type="primary"
|
|
||||||
placement="top"
|
|
||||||
title="是否删除当前数据?"
|
|
||||||
width="180"
|
|
||||||
@confirm="delHandler(scope)">
|
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -99,81 +45,75 @@
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
</ElTable>
|
</ElTable>
|
||||||
<ElPagination
|
<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" />
|
||||||
layout="->, sizes, total, prev, pager, next"
|
<GoodsCategoryForm ref="goodsCategoryForm" @edit-succ="paging" />
|
||||||
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>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
|
||||||
import GoodsCategoryForm from '@/pages/gds/goods-category/GoodsCategoryForm.vue'
|
import GoodsCategoryForm from "@/pages/gds/goods-category/GoodsCategoryForm.vue";
|
||||||
import Page from '@/components/page/Page.vue'
|
import Page from "@/components/page/Page.vue";
|
||||||
import { elIcons } from '@/common/element/element.ts'
|
import { elIcons } from "@/common/element/element.ts";
|
||||||
import Utils from '@/common/utils'
|
import Utils from "@/common/utils";
|
||||||
|
import AppApi from "@/common/app/app-api.ts";
|
||||||
|
|
||||||
const totalCount = ref(0)
|
const totalCount = ref(0);
|
||||||
const tableData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([]))
|
const tableData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult[]>([]));
|
||||||
const searchForm = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryParam>({
|
const searchForm = Utils.resetAble(
|
||||||
current: 1,
|
reactive<GoodsCategoryTypes.SearchGoodsCategoryParam>({
|
||||||
size: 20,
|
current: 1,
|
||||||
}))
|
size: 20,
|
||||||
const searching = ref(false)
|
})
|
||||||
const deling = ref(false)
|
);
|
||||||
const showSearchForm = ref(true)
|
const searching = ref(false);
|
||||||
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>('goodsCategoryForm')
|
const deling = ref(false);
|
||||||
|
const showSearchForm = ref(true);
|
||||||
|
const goodsCategoryFormIns = useTemplateRef<InstanceType<typeof GoodsCategoryForm>>("goodsCategoryForm");
|
||||||
|
|
||||||
function showDialog(data?: GoodsCategoryTypes.SearchGoodsCategoryResult) {
|
function showDialog(data?: GoodsCategoryTypes.SearchGoodsCategoryResult) {
|
||||||
goodsCategoryFormIns.value?.open(data)
|
goodsCategoryFormIns.value?.open(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
function delHandler({row}: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
|
function delHandler({ row }: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
|
||||||
deling.value = true
|
deling.value = true;
|
||||||
GoodsCategoryApi.del([ row.id! ])
|
GoodsCategoryApi.del([row.id!])
|
||||||
.then(() => {
|
.then(() => {
|
||||||
ElMessage.success('删除成功')
|
ElMessage.success("删除成功");
|
||||||
paging()
|
paging();
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
deling.value = false
|
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
deling.value = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function modifyHandler({row}: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
|
function modifyHandler({ row }: { row: GoodsCategoryTypes.SearchGoodsCategoryResult }) {
|
||||||
showDialog(row)
|
showDialog(row);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addHandler() {
|
function addHandler() {
|
||||||
showDialog()
|
showDialog();
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
searchForm.$reset()
|
searchForm.$reset();
|
||||||
paging()
|
paging();
|
||||||
}
|
}
|
||||||
|
|
||||||
function paging() {
|
function paging() {
|
||||||
searching.value = true
|
searching.value = true;
|
||||||
GoodsCategoryApi.paging(searchForm)
|
GoodsCategoryApi.paging(searchForm)
|
||||||
.then(res => {
|
.then((res) => {
|
||||||
totalCount.value = res.data?.total ?? 0
|
totalCount.value = res.data?.total ?? 0;
|
||||||
tableData.$reset(res.data?.records ?? [])
|
tableData.$reset(res.data?.records ?? []);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
searching.value = false
|
searching.value = false;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
paging()
|
paging();
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,159 +1,129 @@
|
||||||
<template>
|
<template>
|
||||||
<ElDialog v-model="showDialog"
|
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
|
||||||
:close-on-click-modal="false"
|
<ElForm :model="formData" :rules="rules" ref="goodsCategoryForm" class="form-panel" label-width="auto">
|
||||||
destroy-on-close
|
<ElFormItem label="业务类型" prop="bizType">
|
||||||
width="fit-content"
|
<!-- <ElInput /> -->
|
||||||
@close="dialogCloseHandler">
|
<!-- ：biz_type，ZaiShengPin-再生品、HuiShouPin-回收品、QiTa其他" -->
|
||||||
<ElForm :model="formData"
|
|
||||||
:rules="rules"
|
<el-select v-model="formData.bizType" :disabled="status === 'view'" placeholder="业务类型" style="width: 240px">
|
||||||
ref="goodsCategoryForm"
|
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
class="form-panel"
|
</el-select>
|
||||||
label-width="auto">
|
|
||||||
<ElFormItem label="Id" prop="id">
|
|
||||||
<ElInput
|
|
||||||
v-model="formData.id"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="Id"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他" prop="bizType">
|
|
||||||
<ElInput
|
<ElFormItem label="分类名称" prop="categoryName">
|
||||||
v-model="formData.bizType"
|
<ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称" />
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="分类名称" prop="categoryName">
|
<ElFormItem label="图片" prop="picture">
|
||||||
<ElInput
|
<!-- <ElInput
|
||||||
v-model="formData.categoryName"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="分类名称"/>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="图片" prop="picture">
|
|
||||||
<ElInput
|
|
||||||
v-model="formData.picture"
|
v-model="formData.picture"
|
||||||
:disabled="status === 'view'"
|
: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>
|
||||||
<ElFormItem label="排序" prop="sort">
|
<ElFormItem label="排序" prop="sort">
|
||||||
<ElInput
|
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="排序" />
|
||||||
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>
|
</ElFormItem>
|
||||||
</ElForm>
|
</ElForm>
|
||||||
<template #footer>
|
<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>
|
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||||
</template>
|
</template>
|
||||||
</ElDialog>
|
</ElDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
|
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
|
||||||
import Strings from '@/common/utils/strings.ts'
|
import Strings from "@/common/utils/strings.ts";
|
||||||
import FormUtil from '@/common/utils/formUtil.ts'
|
import FormUtil from "@/common/utils/formUtil.ts";
|
||||||
import Utils from '@/common/utils'
|
import Uploader from "@/components/uploader/Uploader.vue";
|
||||||
import {
|
|
||||||
ElMessage,
|
|
||||||
type FormInstance,
|
|
||||||
type FormRules,
|
|
||||||
} from 'element-plus'
|
|
||||||
|
|
||||||
const emits = defineEmits(['editSucc'])
|
import Utils from "@/common/utils";
|
||||||
const showDialog = ref(false)
|
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||||
const submiting = ref(false)
|
|
||||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
|
||||||
|
|
||||||
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>>({
|
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
|
||||||
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
|
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||||||
bizType: [{ required: true, message: '请填写业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他', trigger: 'blur' }],
|
bizType: [{ required: true, message: "请填写业务类型", trigger: "blur" }],
|
||||||
categoryName: [{ required: true, message: '请填写分类名称', trigger: 'blur' }],
|
categoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
|
||||||
picture: [{ required: true, message: '请填写图片', trigger: 'blur' }],
|
picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
|
||||||
sort: [{ required: true, message: '请填写排序', trigger: 'blur' }],
|
sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
|
||||||
creatorId: [{ required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur' }],
|
creatorId: [{ required: true, message: "请填写创建人 Id；sys_user.id", trigger: "blur" }],
|
||||||
modifierId: [{ 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' }],
|
createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
|
||||||
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
|
modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
|
||||||
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
|
deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
|
||||||
})
|
});
|
||||||
|
|
||||||
function dialogCloseHandler() {
|
function dialogCloseHandler() {
|
||||||
formData.$reset()
|
formData.$reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitHandler() {
|
function submitHandler() {
|
||||||
if (status.value === 'view') return
|
if (status.value === "view") return;
|
||||||
submiting.value = true
|
submiting.value = true;
|
||||||
if (formData.id != null) {
|
if (formData.id != null) {
|
||||||
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.modify(formData))
|
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.modify(formData))
|
||||||
.then(() => {
|
.then(() => {
|
||||||
ElMessage.success('修改成功')
|
ElMessage.success("修改成功");
|
||||||
emits('editSucc')
|
emits("editSucc");
|
||||||
showDialog.value = false
|
showDialog.value = false;
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
submiting.value = false
|
submiting.value = false;
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.add(formData))
|
FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.add(formData))
|
||||||
.then(() => {
|
.then(() => {
|
||||||
ElMessage.success('添加成功')
|
ElMessage.success("添加成功");
|
||||||
emits('editSucc')
|
emits("editSucc");
|
||||||
showDialog.value = false
|
showDialog.value = false;
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
submiting.value = false
|
submiting.value = false;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
open(data: GoodsCategoryTypes.SearchGoodsCategoryResult = {}) {
|
open(data: GoodsCategoryTypes.SearchGoodsCategoryResult = {}) {
|
||||||
showDialog.value = true
|
showDialog.value = true;
|
||||||
if (!Strings.isBlank(data.id)) {
|
if (!Strings.isBlank(data.id)) {
|
||||||
status.value = 'modify'
|
status.value = "modify";
|
||||||
GoodsCategoryApi.detail(data.id!)
|
GoodsCategoryApi.detail(data.id!).then((res) => {
|
||||||
.then(res => {
|
formData.$reset(res.data);
|
||||||
formData.$reset(res.data)
|
});
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
status.value = 'add'
|
status.value = "add";
|
||||||
formData.$reset(data)
|
formData.$reset(data);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ declare global {
|
||||||
|
|
||||||
interface SearchGoodsCategoryResult {
|
interface SearchGoodsCategoryResult {
|
||||||
// Id
|
// Id
|
||||||
id?: string
|
id: string
|
||||||
// 业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他
|
// 业务类型；字典代码：biz_type，ZaiShengPin-->再生品、HuiShouPin-->回收品、QiTa-->其他
|
||||||
bizType?: string
|
bizType?: string
|
||||||
// 分类名称
|
// 分类名称
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page>
|
||||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||||
<ElFormItem label="Id">
|
<ElFormItem label="商品编码">
|
||||||
<ElInput
|
<ElInput v-model="searchForm.sn" placeholder="商品编码" />
|
||||||
v-model="searchForm.id"
|
|
||||||
placeholder="Id"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="产品类型 Id">
|
<ElFormItem label="产品名称">
|
||||||
<ElInput
|
<ElInput v-model="searchForm.goodsName" placeholder="产品名称" />
|
||||||
v-model="searchForm.goodsCategoryId"
|
|
||||||
placeholder="产品类型 Id"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="商品编码">
|
<ElFormItem label="规格">
|
||||||
<ElInput
|
<ElInput v-model="searchForm.specParams" placeholder="规格" />
|
||||||
v-model="searchForm.sn"
|
|
||||||
placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="产品名称">
|
<!-- ；字典代码：unit -->
|
||||||
<ElInput
|
<ElFormItem label="计量单位">
|
||||||
v-model="searchForm.goodsName"
|
<ElInput v-model="searchForm.unit" placeholder="计量单位" />
|
||||||
placeholder="产品名称"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="规格">
|
<!-- <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-->是">
|
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.fg"
|
v-model="searchForm.fg"
|
||||||
placeholder="是否为成品；0-->否、1-->是"/>
|
placeholder="是否为成品"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否为半成品；0-->否、1-->是">
|
<ElFormItem label="是否为半成品">
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.sfg"
|
v-model="searchForm.sfg"
|
||||||
placeholder="是否为半成品；0-->否、1-->是"/>
|
placeholder="是否为半成品"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否为原料；0-->否、1-->是">
|
<ElFormItem label="是否为原料">
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.rg"
|
v-model="searchForm.rg"
|
||||||
placeholder="是否为原料；0-->否、1-->是"/>
|
placeholder="是否为原料"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="排序">
|
<ElFormItem label="排序">
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.sort"
|
v-model="searchForm.sort"
|
||||||
placeholder="排序"/>
|
placeholder="排序"/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否可用；0-->否、1-->是">
|
<ElFormItem label="是否可用">
|
||||||
<ElInput
|
<ElInput
|
||||||
v-model="searchForm.canuse"
|
v-model="searchForm.canuse"
|
||||||
placeholder="是否可用；0-->否、1-->是"/>
|
placeholder="是否可用"/>
|
||||||
|
</ElFormItem> -->
|
||||||
|
<ElFormItem label="备注">
|
||||||
|
<ElInput v-model="searchForm.memo" placeholder="备注" />
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="备注">
|
|
||||||
<ElInput
|
<ElFormItem label="创建时间">
|
||||||
v-model="searchForm.memo"
|
<ElInput v-model="searchForm.createTime" placeholder="创建时间" />
|
||||||
placeholder="备注"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="创建人 Id；sys_user.id">
|
<ElFormItem label="修改时间">
|
||||||
<ElInput
|
<ElInput v-model="searchForm.modifyTime" placeholder="修改时间" />
|
||||||
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>
|
</ElFormItem>
|
||||||
<ElFormItem>
|
<ElFormItem>
|
||||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||||
|
|
@ -99,45 +57,48 @@
|
||||||
|
|
||||||
<div class="tool-bar">
|
<div class="tool-bar">
|
||||||
<ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
|
<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>
|
</div>
|
||||||
|
|
||||||
<ElTable v-loading="searching" :data="tableData"
|
<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">
|
||||||
cell-class-name="table-cell"
|
<!-- <ElTableColumn label="产品类型" prop="goodsCategoryId" /> -->
|
||||||
class="table-list"
|
<ElTableColumn label="商品编码" prop="sn" />
|
||||||
empty-text="暂无数据"
|
<ElTableColumn label="产品名称" prop="goodsName" />
|
||||||
header-row-class-name="table-header"
|
<ElTableColumn label="规格" prop="specParams" />
|
||||||
row-key="id">
|
<ElTableColumn label="图片" width="100">
|
||||||
<ElTableColumn label="Id" prop="id"/>
|
<template #default="{ row }">
|
||||||
<ElTableColumn label="产品类型 Id" prop="goodsCategoryId"/>
|
<el-image :preview-src-list="[AppApi.fileUrl(row.picture)]" :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress style="width: 60px; height: 60px" />
|
||||||
<ElTableColumn label="商品编码" prop="sn"/>
|
</template>
|
||||||
<ElTableColumn label="产品名称" prop="goodsName"/>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="规格" prop="specParams"/>
|
<!-- <ElTableColumn label="计量单位" prop="unit" /> -->
|
||||||
<ElTableColumn label="图片" prop="picture"/>
|
<ElTableColumn label="是否为成品" width="100">
|
||||||
<ElTableColumn label="计量单位；字典代码：unit" prop="unit"/>
|
<template #default="{ row }">
|
||||||
<ElTableColumn label="是否为成品；0-->否、1-->是" prop="fg"/>
|
{{ row.fg ? "是" : "否" }}
|
||||||
<ElTableColumn label="是否为半成品；0-->否、1-->是" prop="sfg"/>
|
</template>
|
||||||
<ElTableColumn label="是否为原料；0-->否、1-->是" prop="rg"/>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="排序" prop="sort"/>
|
|
||||||
<ElTableColumn label="是否可用；0-->否、1-->是" prop="canuse"/>
|
<ElTableColumn label="是否为半成品" width="120">
|
||||||
<ElTableColumn label="备注" prop="memo"/>
|
<template #default="{ row }">
|
||||||
<ElTableColumn label="创建人 Id；sys_user.id" prop="creatorId"/>
|
{{ row.sfg ? "是" : "否" }}
|
||||||
<ElTableColumn label="修改人 Id；sys_user.id" prop="modifierId"/>
|
</template>
|
||||||
<ElTableColumn label="创建时间" prop="createTime"/>
|
</ElTableColumn>
|
||||||
<ElTableColumn label="修改时间" prop="modifyTime"/>
|
<ElTableColumn label="是否为原料" prop="rg" width="100">
|
||||||
<ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
|
<template #default="{ row }">
|
||||||
<ElTableColumn label="操作" width="180">
|
{{ 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">
|
<template #default="scope">
|
||||||
<div class="action-btn">
|
<div class="action-btn">
|
||||||
<ElPopconfirm
|
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||||||
confirm-button-text="是"
|
|
||||||
cancel-button-text="否"
|
|
||||||
confirm-button-type="danger"
|
|
||||||
cancel-button-type="primary"
|
|
||||||
placement="top"
|
|
||||||
title="是否删除当前数据?"
|
|
||||||
width="180"
|
|
||||||
@confirm="delHandler(scope)">
|
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -147,81 +108,75 @@
|
||||||
</template>
|
</template>
|
||||||
</ElTableColumn>
|
</ElTableColumn>
|
||||||
</ElTable>
|
</ElTable>
|
||||||
<ElPagination
|
<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" />
|
||||||
layout="->, sizes, total, prev, pager, next"
|
<GoodsForm ref="goodsForm" @edit-succ="paging" />
|
||||||
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>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
|
||||||
import GoodsForm from '@/pages/gds/goods/GoodsForm.vue'
|
import GoodsForm from "@/pages/gds/goods/GoodsForm.vue";
|
||||||
import Page from '@/components/page/Page.vue'
|
import Page from "@/components/page/Page.vue";
|
||||||
import { elIcons } from '@/common/element/element.ts'
|
import { elIcons } from "@/common/element/element.ts";
|
||||||
import Utils from '@/common/utils'
|
import Utils from "@/common/utils";
|
||||||
|
import AppApi from "@/common/app/app-api.ts";
|
||||||
|
|
||||||
const totalCount = ref(0)
|
const totalCount = ref(0);
|
||||||
const tableData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult[]>([]))
|
const tableData = Utils.resetAble(reactive<GoodsTypes.SearchGoodsResult[]>([]));
|
||||||
const searchForm = Utils.resetAble(reactive<GoodsTypes.SearchGoodsParam>({
|
const searchForm = Utils.resetAble(
|
||||||
current: 1,
|
reactive<GoodsTypes.SearchGoodsParam>({
|
||||||
size: 20,
|
current: 1,
|
||||||
}))
|
size: 20,
|
||||||
const searching = ref(false)
|
})
|
||||||
const deling = ref(false)
|
);
|
||||||
const showSearchForm = ref(true)
|
const searching = ref(false);
|
||||||
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>('goodsForm')
|
const deling = ref(false);
|
||||||
|
const showSearchForm = ref(true);
|
||||||
|
const goodsFormIns = useTemplateRef<InstanceType<typeof GoodsForm>>("goodsForm");
|
||||||
|
|
||||||
function showDialog(data?: GoodsTypes.SearchGoodsResult) {
|
function showDialog(data?: GoodsTypes.SearchGoodsResult) {
|
||||||
goodsFormIns.value?.open(data)
|
goodsFormIns.value?.open(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
function delHandler({row}: { row: GoodsTypes.SearchGoodsResult }) {
|
function delHandler({ row }: { row: GoodsTypes.SearchGoodsResult }) {
|
||||||
deling.value = true
|
deling.value = true;
|
||||||
GoodsApi.del([ row.id! ])
|
GoodsApi.del([row.id!])
|
||||||
.then(() => {
|
.then(() => {
|
||||||
ElMessage.success('删除成功')
|
ElMessage.success("删除成功");
|
||||||
paging()
|
paging();
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
deling.value = false
|
|
||||||
})
|
})
|
||||||
|
.finally(() => {
|
||||||
|
deling.value = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function modifyHandler({row}: { row: GoodsTypes.SearchGoodsResult }) {
|
function modifyHandler({ row }: { row: GoodsTypes.SearchGoodsResult }) {
|
||||||
showDialog(row)
|
showDialog(row);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addHandler() {
|
function addHandler() {
|
||||||
showDialog()
|
showDialog();
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
searchForm.$reset()
|
searchForm.$reset();
|
||||||
paging()
|
paging();
|
||||||
}
|
}
|
||||||
|
|
||||||
function paging() {
|
function paging() {
|
||||||
searching.value = true
|
searching.value = true;
|
||||||
GoodsApi.paging(searchForm)
|
GoodsApi.paging(searchForm)
|
||||||
.then(res => {
|
.then((res) => {
|
||||||
totalCount.value = res.data?.total ?? 0
|
totalCount.value = res.data?.total ?? 0;
|
||||||
tableData.$reset(res.data?.records ?? [])
|
tableData.$reset(res.data?.records ?? []);
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
searching.value = false
|
searching.value = false;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
paging()
|
paging();
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,215 +1,166 @@
|
||||||
<template>
|
<template>
|
||||||
<ElDialog v-model="showDialog"
|
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
|
||||||
:close-on-click-modal="false"
|
<ElForm :model="formData" :rules="rules" ref="goodsForm" class="form-panel" label-width="auto">
|
||||||
destroy-on-close
|
<ElFormItem label="产品类型" prop="goodsCategoryId">
|
||||||
width="fit-content"
|
<!-- <ElInput v-model="formData.goodsCategoryId" :disabled="status === 'view'" placeholder="产品类型 Id" /> -->
|
||||||
@close="dialogCloseHandler">
|
<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">
|
||||||
<ElForm :model="formData"
|
<el-option v-for="item in category" :key="item.id" :label="item.categoryName" :value="item.id" />
|
||||||
:rules="rules"
|
</el-select>
|
||||||
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>
|
||||||
<ElFormItem label="产品类型 Id" prop="goodsCategoryId">
|
<ElFormItem label="商品编码" prop="sn">
|
||||||
<ElInput
|
<ElInput v-model="formData.sn" :disabled="status === 'view'" placeholder="商品编码" />
|
||||||
v-model="formData.goodsCategoryId"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="产品类型 Id"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="商品编码" prop="sn">
|
<ElFormItem label="产品名称" prop="goodsName">
|
||||||
<ElInput
|
<ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称" />
|
||||||
v-model="formData.sn"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="商品编码"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="产品名称" prop="goodsName">
|
<ElFormItem label="规格" prop="specParams">
|
||||||
<ElInput
|
<ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格" />
|
||||||
v-model="formData.goodsName"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="产品名称"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="规格" prop="specParams">
|
<ElFormItem label="图片" prop="picture">
|
||||||
<ElInput
|
<Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
|
||||||
v-model="formData.specParams"
|
<span style="font-size: 50px; padding: 0 40px">+</span>
|
||||||
:disabled="status === 'view'"
|
</Uploader>
|
||||||
placeholder="规格"/>
|
<!-- <ElInput v-model="formData.picture" :disabled="status === 'view'" placeholder="图片" /> -->
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="图片" prop="picture">
|
<ElFormItem label="计量单位" prop="unit">
|
||||||
<ElInput
|
<!-- <ElInput v-model="formData.unit" :disabled="status === 'view'" placeholder="计量单位" /> -->
|
||||||
v-model="formData.picture"
|
|
||||||
:disabled="status === 'view'"
|
<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">
|
||||||
placeholder="图片"/>
|
<el-option v-for="item in unitList" :key="item.id" :label="item.txt" :value="item.val" />
|
||||||
|
</el-select>
|
||||||
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="计量单位；字典代码：unit" prop="unit">
|
<ElFormItem label="是否为成品" prop="fg">
|
||||||
<ElInput
|
<el-switch v-model="formData.fg" />
|
||||||
v-model="formData.unit"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="计量单位；字典代码：unit"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否为成品；0-->否、1-->是" prop="fg">
|
<ElFormItem label="是否为半成品" prop="sfg">
|
||||||
<ElInput
|
<el-switch v-model="formData.sfg" />
|
||||||
v-model="formData.fg"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="是否为成品；0-->否、1-->是"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否为半成品；0-->否、1-->是" prop="sfg">
|
<ElFormItem label="是否为原料" prop="rg">
|
||||||
<ElInput
|
<el-switch v-model="formData.rg" />
|
||||||
v-model="formData.sfg"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="是否为半成品；0-->否、1-->是"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否为原料；0-->否、1-->是" prop="rg">
|
<ElFormItem label="排序" prop="sort">
|
||||||
<ElInput
|
<ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序" />
|
||||||
v-model="formData.rg"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="是否为原料；0-->否、1-->是"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="排序" prop="sort">
|
<ElFormItem label="备注" prop="memo">
|
||||||
<ElInput
|
<ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注" />
|
||||||
v-model="formData.sort"
|
|
||||||
:disabled="status === 'view'"
|
|
||||||
placeholder="排序"/>
|
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem label="是否可用；0-->否、1-->是" prop="canuse">
|
<ElFormItem label="是否可用" prop="canuse">
|
||||||
<ElInput
|
<el-switch v-model="formData.canuse" :disabled="status === 'view'" />
|
||||||
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>
|
</ElFormItem>
|
||||||
</ElForm>
|
</ElForm>
|
||||||
<template #footer>
|
<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>
|
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||||
</template>
|
</template>
|
||||||
</ElDialog>
|
</ElDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
|
import GoodsApi from "@/pages/gds/goods/goods-api.ts";
|
||||||
import Strings from '@/common/utils/strings.ts'
|
import Strings from "@/common/utils/strings.ts";
|
||||||
import FormUtil from '@/common/utils/formUtil.ts'
|
import FormUtil from "@/common/utils/formUtil.ts";
|
||||||
import Utils from '@/common/utils'
|
import Utils from "@/common/utils";
|
||||||
import {
|
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||||
ElMessage,
|
import Uploader from "@/components/uploader/Uploader.vue";
|
||||||
type FormInstance,
|
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
|
||||||
type FormRules,
|
import DictApi from "@/pages/sys/dict/dict-api.ts";
|
||||||
} from 'element-plus'
|
|
||||||
|
|
||||||
const emits = defineEmits(['editSucc'])
|
const emits = defineEmits(["editSucc"]);
|
||||||
const showDialog = ref(false)
|
const showDialog = ref(false);
|
||||||
const submiting = ref(false)
|
const submiting = ref(false);
|
||||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
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>>({
|
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
|
||||||
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
|
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||||||
goodsCategoryId: [{ required: true, message: '请填写产品类型 Id', trigger: 'blur' }],
|
goodsCategoryId: [{ required: true, message: "请填写产品类型", trigger: "blur" }],
|
||||||
sn: [{ required: true, message: '请填写商品编码', trigger: 'blur' }],
|
sn: [{ required: true, message: "请填写商品编码", trigger: "blur" }],
|
||||||
goodsName: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
|
goodsName: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
|
||||||
specParams: [{ required: true, message: '请填写规格', trigger: 'blur' }],
|
specParams: [{ required: true, message: "请填写规格", trigger: "blur" }],
|
||||||
picture: [{ required: true, message: '请填写图片', trigger: 'blur' }],
|
picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
|
||||||
unit: [{ required: true, message: '请填写计量单位；字典代码：unit', trigger: 'blur' }],
|
unit: [{ required: true, message: "请填写计量单位", trigger: "blur" }],
|
||||||
fg: [{ required: true, message: '请填写是否为成品；0-->否、1-->是', trigger: 'blur' }],
|
fg: [{ required: true, message: "请填写是否为成品", trigger: "blur" }],
|
||||||
sfg: [{ required: true, message: '请填写是否为半成品；0-->否、1-->是', trigger: 'blur' }],
|
sfg: [{ required: true, message: "请填写是否为半成品", trigger: "blur" }],
|
||||||
rg: [{ required: true, message: '请填写是否为原料；0-->否、1-->是', trigger: 'blur' }],
|
rg: [{ required: true, message: "请填写是否为原料", trigger: "blur" }],
|
||||||
sort: [{ required: true, message: '请填写排序', 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' }],
|
|
||||||
})
|
|
||||||
|
|
||||||
function dialogCloseHandler() {
|
function dialogCloseHandler() {
|
||||||
formData.$reset()
|
formData.$reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitHandler() {
|
function submitHandler() {
|
||||||
if (status.value === 'view') return
|
if (status.value === "view") return;
|
||||||
submiting.value = true
|
submiting.value = true;
|
||||||
if (formData.id != null) {
|
if (formData.id != null) {
|
||||||
FormUtil.submit(goodsFormIns, () => GoodsApi.modify(formData))
|
FormUtil.submit(goodsFormIns, () => GoodsApi.modify(formData))
|
||||||
.then(() => {
|
.then(() => {
|
||||||
ElMessage.success('修改成功')
|
ElMessage.success("修改成功");
|
||||||
emits('editSucc')
|
emits("editSucc");
|
||||||
showDialog.value = false
|
showDialog.value = false;
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
submiting.value = false
|
submiting.value = false;
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
FormUtil.submit(goodsFormIns, () => GoodsApi.add(formData))
|
FormUtil.submit(goodsFormIns, () => GoodsApi.add(formData))
|
||||||
.then(() => {
|
.then(() => {
|
||||||
ElMessage.success('添加成功')
|
ElMessage.success("添加成功");
|
||||||
emits('editSucc')
|
emits("editSucc");
|
||||||
showDialog.value = false
|
showDialog.value = false;
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.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({
|
defineExpose({
|
||||||
open(data: GoodsTypes.SearchGoodsResult = {}) {
|
open(data: GoodsTypes.SearchGoodsResult = {}) {
|
||||||
showDialog.value = true
|
showDialog.value = true;
|
||||||
if (!Strings.isBlank(data.id)) {
|
if (!Strings.isBlank(data.id)) {
|
||||||
status.value = 'modify'
|
status.value = "modify";
|
||||||
GoodsApi.detail(data.id!)
|
GoodsApi.detail(data.id!).then((res) => {
|
||||||
.then(res => {
|
formData.$reset(res.data);
|
||||||
formData.$reset(res.data)
|
});
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
status.value = 'add'
|
status.value = "add";
|
||||||
formData.$reset(data)
|
formData.$reset(data);
|
||||||
}
|
}
|
||||||
}
|
getOpt();
|
||||||
})
|
},
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
|
|
||||||
|
|
@ -65,13 +65,13 @@ declare global {
|
||||||
|
|
||||||
interface SearchDictItemResult {
|
interface SearchDictItemResult {
|
||||||
// Id
|
// Id
|
||||||
id?: string
|
id: string
|
||||||
// 字典 Id
|
// 字典 Id
|
||||||
dictId?: string
|
dictId?: string
|
||||||
// 字典标识
|
// 字典标识
|
||||||
dictKey?: string
|
dictKey?: string
|
||||||
// 值
|
// 值
|
||||||
val?: string
|
val: string
|
||||||
// 显示文本
|
// 显示文本
|
||||||
txt?: string
|
txt?: string
|
||||||
// 排序
|
// 排序
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue