【招生平台主控端】 优化# 移除无用代码
parent
ed0fc05be1
commit
13058f0936
|
|
@ -1,41 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { nextTick, unref, watch } from 'vue'
|
|
||||||
import { useAreaMapOperation } from './hooks/useServiceArea';
|
|
||||||
import { MAP_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
|
|
||||||
const parentApi = inject(MAP_INJECTION_KEY)
|
|
||||||
|
|
||||||
const { mapRef, setMapCenter, drawPolygon, removePolygon, initPolygon } = useAreaMapOperation(parentApi)
|
|
||||||
const isInited = computed(() => parentApi?.isInited.value)
|
|
||||||
const location = computed(() => !isInited.value && parentApi?.address.value.location)
|
|
||||||
|
|
||||||
|
|
||||||
watch(() => unref(parentApi?.address), ({ location }) => {
|
|
||||||
if (isInited.value) return
|
|
||||||
setMapCenter(location)
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (isInited.value) return
|
|
||||||
nextTick(() => setMapCenter(location.value))
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
setMapCenter,
|
|
||||||
initPolygon,
|
|
||||||
removePolygon,
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="map">
|
|
||||||
<div ref="mapRef" class="map__inner"></div>
|
|
||||||
<div id="toolControl">
|
|
||||||
<div class="toolItem" title="添加区域按钮" @click="drawPolygon"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '@/components/area-common/styles/map.scss';
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { watch, onMounted, type PropType } from 'vue'
|
|
||||||
import area from '@/utils/area'
|
|
||||||
import { MAP_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
|
|
||||||
const cascaderProps = {
|
|
||||||
checkStrictly: true,
|
|
||||||
value: 'label'
|
|
||||||
}
|
|
||||||
const parentApi = inject(MAP_INJECTION_KEY)
|
|
||||||
|
|
||||||
const emit = defineEmits(['handleSearch'])
|
|
||||||
|
|
||||||
const form = reactive<{ area: string[] }>({
|
|
||||||
area: [],
|
|
||||||
})
|
|
||||||
const isDisabled = computed(() => !form.area?.length)
|
|
||||||
const isInited = computed(() => parentApi?.isInited.value)
|
|
||||||
const location = computed(() => !isInited.value ? parentApi?.address.value.address_components : '')
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (isInited.value) return
|
|
||||||
setCascaderValue(location.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleSearch = async () => {
|
|
||||||
emit('handleSearch', form)
|
|
||||||
}
|
|
||||||
function setCascaderValue(location: any) {
|
|
||||||
const { province, city, district } = location
|
|
||||||
form.area = [province, city, district]
|
|
||||||
}
|
|
||||||
defineExpose({
|
|
||||||
setCascaderValue
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="area__search">
|
|
||||||
<el-form :model="form" :inline="true">
|
|
||||||
<el-form-item label="地区选择">
|
|
||||||
<el-cascader v-model="form.area" :options="area" :props="cascaderProps" clearable>
|
|
||||||
</el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" :disabled="isDisabled" @click="handleSearch">查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { useRoute } from 'vue-router'
|
|
||||||
import type { ElTable } from 'element-plus'
|
|
||||||
import Pagination from '@/components/pagination/index.vue'
|
|
||||||
import { MAP_INJECTION_KEY, type Pager } from '@/config/symbol'
|
|
||||||
|
|
||||||
interface TableProps {
|
|
||||||
zone: String
|
|
||||||
pager: Pager
|
|
||||||
selectData?: any[]
|
|
||||||
}
|
|
||||||
const props = withDefaults(defineProps<TableProps>(), {
|
|
||||||
pager: {}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['update:selectData', 'update:pager'])
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
|
|
||||||
const parentApi = inject(MAP_INJECTION_KEY)
|
|
||||||
|
|
||||||
const tableRef = ref<InstanceType<typeof ElTable>>()
|
|
||||||
|
|
||||||
const tableData = computed(() => props.pager?.lists)
|
|
||||||
const getLists = computed(() => props.pager?.getLists)
|
|
||||||
const pathName = computed(() => route.meta.activeMenu)
|
|
||||||
const originSelectData = computed(() => parentApi?.originSelectData?.value)
|
|
||||||
const pager = computed({
|
|
||||||
get() {
|
|
||||||
return props.pager
|
|
||||||
},
|
|
||||||
set(newVal) {
|
|
||||||
emit('update:pager', newVal)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/**定位 */
|
|
||||||
const handleLocation = (row: any) => {
|
|
||||||
parentApi?.handleLocation(row)
|
|
||||||
}
|
|
||||||
/**删除 */
|
|
||||||
const handleDelete = (id: number) => {
|
|
||||||
parentApi?.handleDelete(id)
|
|
||||||
}
|
|
||||||
/**选中 */
|
|
||||||
const handleSelectionChange = (val: any) => {
|
|
||||||
emit('update:selectData', val)
|
|
||||||
}
|
|
||||||
/**初始化选中 */
|
|
||||||
watch(() => unref(tableData), (val) => {
|
|
||||||
if (val.length && props.selectData?.length) {
|
|
||||||
parentApi?.toggleRowSelection!(originSelectData.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
defineExpose({
|
|
||||||
tableRef
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="atable">
|
|
||||||
<div class="atable__top">
|
|
||||||
<span>{{ zone }}已有服务区域</span>
|
|
||||||
</div>
|
|
||||||
<div class="atable-bottom">
|
|
||||||
<el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange">
|
|
||||||
<el-table-column type="selection" width="55" reserve-selection />
|
|
||||||
<el-table-column prop="name" label="名称" />
|
|
||||||
<el-table-column label="操作">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button link type="primary" @click="handleLocation(row)">定位</el-button>
|
|
||||||
<el-button v-if="!pathName" link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="flex justify-end mt-4">
|
|
||||||
<Pagination v-model="pager" @change="getLists" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.atable {
|
|
||||||
background-color: #fff;
|
|
||||||
// width: 450px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,263 +0,0 @@
|
||||||
import { nextTick, type Ref, unref, watch } from "vue"
|
|
||||||
import { useRequest } from "@/hooks/useFetchData"
|
|
||||||
import { usePaging } from "@/hooks/usePaging"
|
|
||||||
import { addArea, apiMapLocation, delArea, getAreaListByLocation, getLonAndLatByArea } from "@/api/service/area"
|
|
||||||
import type { Pager, Location } from '@/config/symbol'
|
|
||||||
import { VITE_MAP_KEY } from "@/config/env"
|
|
||||||
import { toast } from "@/utils/util"
|
|
||||||
|
|
||||||
/**用户操作 */
|
|
||||||
export function useAreaOperation(inited = true) {
|
|
||||||
const areaSearch = ref()
|
|
||||||
const tcMap = ref()
|
|
||||||
const zone = ref('') //地区
|
|
||||||
const regionCode = ref() //地区编码
|
|
||||||
const base = ref<Pager<any>>() //区域列表信息
|
|
||||||
const address = ref() //当前地址信息
|
|
||||||
const isInited = ref(true) //初始化
|
|
||||||
|
|
||||||
// 查询
|
|
||||||
const handleSearch = (form: any) => {
|
|
||||||
const params = {
|
|
||||||
address: encodeURIComponent(form.area.join('')),
|
|
||||||
key: VITE_MAP_KEY
|
|
||||||
}
|
|
||||||
const { runFn } = useRequest({
|
|
||||||
apiFn: getLonAndLatByArea,
|
|
||||||
onSuccess(response) {
|
|
||||||
const { result: { location, address_components, ad_info } } = response
|
|
||||||
searchCommon({ location, address_components, ad_info })
|
|
||||||
},
|
|
||||||
})
|
|
||||||
runFn(params)
|
|
||||||
}
|
|
||||||
// 查询后操作
|
|
||||||
const searchCommon = (payload: any) => {
|
|
||||||
const { location, address_components, ad_info } = payload
|
|
||||||
if (isInited.value) {
|
|
||||||
tcMap.value?.setMapCenter(location)
|
|
||||||
areaSearch.value?.setCascaderValue(address_components)
|
|
||||||
}
|
|
||||||
address.value = payload
|
|
||||||
zone.value = address_components.district
|
|
||||||
regionCode.value = ad_info.adcode
|
|
||||||
fetchAreaList()
|
|
||||||
}
|
|
||||||
// 添加区域
|
|
||||||
const increment = async (payload: any) => {
|
|
||||||
const { runFn } = useRequest({
|
|
||||||
apiFn: addArea,
|
|
||||||
onSuccess(response) {
|
|
||||||
tcMap.value.removePolygon()
|
|
||||||
toast('添加成功', 'success')
|
|
||||||
fetchAreaList()
|
|
||||||
},
|
|
||||||
})
|
|
||||||
runFn(payload)
|
|
||||||
}
|
|
||||||
/**获取区域列表 */
|
|
||||||
const fetchAreaList = async () => {
|
|
||||||
const params = {
|
|
||||||
regionId: regionCode.value
|
|
||||||
}
|
|
||||||
const { pager, getLists } = usePaging({
|
|
||||||
fetchFun: getAreaListByLocation,
|
|
||||||
params
|
|
||||||
})
|
|
||||||
await getLists()
|
|
||||||
base.value = Object.assign(pager, {
|
|
||||||
getLists
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**初始化当前位置 */
|
|
||||||
const initPosition = async () => {
|
|
||||||
const params = { key: VITE_MAP_KEY }
|
|
||||||
const { runFn } = useRequest({
|
|
||||||
apiFn: apiMapLocation,
|
|
||||||
onSuccess(response) {
|
|
||||||
const { result: { location, ad_info } } = response
|
|
||||||
searchCommon({ location, address_components: ad_info, ad_info })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
runFn(params)
|
|
||||||
isInited.value = inited
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(initPosition)
|
|
||||||
|
|
||||||
return {
|
|
||||||
tcMap,
|
|
||||||
areaSearch,
|
|
||||||
zone,
|
|
||||||
regionCode,
|
|
||||||
increment,
|
|
||||||
searchCommon,
|
|
||||||
handleSearch,
|
|
||||||
base,
|
|
||||||
address,
|
|
||||||
isInited
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**表格操作 */
|
|
||||||
export function useAreaTableOperation({ tcMap, base, aTable }: { tcMap: any, base: Ref<Pager>, aTable: any }) {
|
|
||||||
|
|
||||||
/**选中 */
|
|
||||||
const toggleRowSelection = (selectData: any[]) => {
|
|
||||||
const tableData = base.value.lists
|
|
||||||
const selectedIds = selectData?.map(item => item.id) as number[]
|
|
||||||
const selectedList = tableData.filter(data => selectedIds.includes(data.id))
|
|
||||||
|
|
||||||
tableData.forEach(data => {
|
|
||||||
aTable.value.tableRef.toggleRowSelection(data, false)
|
|
||||||
})
|
|
||||||
selectedList.forEach(row => {
|
|
||||||
aTable.value.tableRef.toggleRowSelection(row, true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**定位 */
|
|
||||||
const handleLocation = (row: any) => {
|
|
||||||
const convertPolygons = row.polygongeo.replace("POLYGON((", '').replace("))", '').split(',')
|
|
||||||
const polygonPaths = convertPolygons.map((path: string) => {
|
|
||||||
const [lng, lat] = path.split(' ')
|
|
||||||
return {
|
|
||||||
lat: parseFloat(lat),
|
|
||||||
lng: parseFloat(lng)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
tcMap.value.initPolygon({
|
|
||||||
polygonId: row.id,
|
|
||||||
polygonPaths
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**删除 */
|
|
||||||
const handleDelete = async (id: number) => {
|
|
||||||
const { runFn } = useRequest({
|
|
||||||
apiFn: delArea,
|
|
||||||
onSuccess(response) {
|
|
||||||
toast('删除成功', 'success')
|
|
||||||
base.value.getLists()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
runFn({ id })
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
handleLocation,
|
|
||||||
handleDelete,
|
|
||||||
toggleRowSelection,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**地图 */
|
|
||||||
export function useAreaMapOperation(parentApi: any) {
|
|
||||||
|
|
||||||
let map, polygon, editor;
|
|
||||||
const TMap = (window as any).TMap
|
|
||||||
|
|
||||||
const mapRef = ref()
|
|
||||||
const drawId = ref([])
|
|
||||||
|
|
||||||
/**初始化地图 */
|
|
||||||
function initMap() {
|
|
||||||
map = new TMap.Map(mapRef.value, {
|
|
||||||
zoom: 12,
|
|
||||||
viewMode: '2D'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**设置地图中心 */
|
|
||||||
function setMapCenter(location: Location) {
|
|
||||||
const { lat, lng } = location
|
|
||||||
map!.setCenter(new TMap.LatLng(lat, lng))
|
|
||||||
}
|
|
||||||
/**绘制多边形 */
|
|
||||||
const drawPolygon = () => {
|
|
||||||
polygon = new TMap.MultiPolygon({
|
|
||||||
map: map
|
|
||||||
})
|
|
||||||
editor = new TMap.tools.GeometryEditor({
|
|
||||||
map: map,
|
|
||||||
overlayList: [
|
|
||||||
{
|
|
||||||
overlay: polygon,
|
|
||||||
id: 'polygon',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
|
|
||||||
activeOverlayId: 'polygon', // 激活图层
|
|
||||||
snappable: true,
|
|
||||||
})
|
|
||||||
editor.on('draw_complete', geometry => {
|
|
||||||
drawId.value.push(geometry.id)
|
|
||||||
geometry.paths.splice(geometry.paths.length, 0, geometry.paths[0])
|
|
||||||
parentApi?.showDialog({
|
|
||||||
polygonPaths: geometry.paths
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**表格定位=>初始化多边形 */
|
|
||||||
function initPolygon({ polygonId, polygonPaths }: { polygonId: number, polygonPaths: Location[] }) {
|
|
||||||
|
|
||||||
if (polygonId === polygon?.id) return
|
|
||||||
|
|
||||||
polygon = new TMap.MultiPolygon({
|
|
||||||
id: polygonId, // 图层id
|
|
||||||
map: map, // 显示多边形图层的底图
|
|
||||||
styles: {
|
|
||||||
// 多边形的相关样式
|
|
||||||
polygon: new TMap.PolygonStyle({
|
|
||||||
color: 'rgb(250, 250, 122)', // 面填充色
|
|
||||||
showBorder: false, // 是否显示拔起面的边线
|
|
||||||
borderColor: '#00FFFF', // 边线颜色
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
geometries: [
|
|
||||||
{
|
|
||||||
id: 'polygon', // 多边形图形数据的标志信息
|
|
||||||
styleId: 'polygon', // 样式id
|
|
||||||
paths: polygonPaths, // 多边形的位置信息
|
|
||||||
properties: {
|
|
||||||
// 多边形的属性数据
|
|
||||||
title: 'polygon',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**移除多边形 (先选中再删除)*/
|
|
||||||
function removePolygon() {
|
|
||||||
editor!.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT).select(drawId.value).setSelectable(true)
|
|
||||||
editor!.delete()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
nextTick(initMap)
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
mapRef,
|
|
||||||
setMapCenter,
|
|
||||||
drawPolygon,
|
|
||||||
removePolygon,
|
|
||||||
initPolygon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**弹框 */
|
|
||||||
export function useDialogOperation(regionCode: Ref<number>) {
|
|
||||||
const infoDialogRef = ref()
|
|
||||||
|
|
||||||
function showDialog(payload: any) {
|
|
||||||
const params = {
|
|
||||||
title: '绘制确认',
|
|
||||||
rawData: { ...payload, regionCode: regionCode.value }
|
|
||||||
}
|
|
||||||
infoDialogRef.value.acceptParams(params)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
infoDialogRef,
|
|
||||||
showDialog
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
.area {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: 50px minmax(100px, auto);
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
&__part {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr minmax(400px, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
.map {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
&__inner {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolControl {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 0px;
|
|
||||||
right: 0px;
|
|
||||||
margin: auto;
|
|
||||||
width: 252px;
|
|
||||||
z-index: 1001;
|
|
||||||
|
|
||||||
.toolItem {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
float: left;
|
|
||||||
margin: 1px;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-size: 30px 30px;
|
|
||||||
background-position: 4px 4px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
box-shadow: 0 1px 2px 0 #e4e7ef;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #ffffff;
|
|
||||||
background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="area-select">
|
|
||||||
<el-cascader :style="{ width }" v-model="areaValue" :options="options" :props="props2" clearable></el-cascader>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import area from '@/utils/area'
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
/** Emit Start **/
|
|
||||||
const emit = defineEmits(['update:province', 'update:city', 'update:district'])
|
|
||||||
/** Emit End **/
|
|
||||||
|
|
||||||
/** Props Start **/
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
province?: any
|
|
||||||
city: any
|
|
||||||
district: any
|
|
||||||
width?: string
|
|
||||||
checkStrictly?: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
province: null,
|
|
||||||
city: null,
|
|
||||||
district: null,
|
|
||||||
width: '340px',
|
|
||||||
checkStrictly: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const props2 = {
|
|
||||||
checkStrictly: true
|
|
||||||
}
|
|
||||||
/** Props End **/
|
|
||||||
|
|
||||||
/** Data End **/
|
|
||||||
const options = ref<any>(area) // 地区列表
|
|
||||||
/** Data Start **/
|
|
||||||
|
|
||||||
/** Computed Start **/
|
|
||||||
// 更新绑定数据
|
|
||||||
const areaValue = computed({
|
|
||||||
get: () => {
|
|
||||||
return [props.province, props.city, props.district]
|
|
||||||
},
|
|
||||||
set: (value: any) => {
|
|
||||||
emit('update:province', value ? value[0] : '')
|
|
||||||
emit('update:city', value ? value[1] : '')
|
|
||||||
emit('update:district', value ? value[2] : '')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/** Computed Start **/
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
<template>
|
|
||||||
<popup class="inline mr-3" :clickModalClose="false" :title="`选择${setTitle}`" :center="true"
|
|
||||||
@close="handleClose(channelFormRef)" @open="handleOpen" @confirm="handleConfirm" width="1200px">
|
|
||||||
<template #trigger>
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
<component :is="setComponent" ref="componentRef" />
|
|
||||||
</popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, ref, type PropType } from 'vue'
|
|
||||||
import type { ElForm, FormInstance } from 'element-plus'
|
|
||||||
import Popup from '@/components/popup/index.vue'
|
|
||||||
import distributeTable from './distributeTable.vue'
|
|
||||||
import userTable from './userTable.vue'
|
|
||||||
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
import { ChannelEnum } from '@/enums/modeEnum'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: Object as PropType<any>
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const parent = inject(CHANNEL_INJECTION_KEY)
|
|
||||||
const channel = computed(() => parent?.channel.value)
|
|
||||||
const condition = computed(() => channel.value === ChannelEnum.DISTBUTOR)
|
|
||||||
const setTitle = computed(() => unref(condition) ? '分销员' : '指定用户')
|
|
||||||
const setComponent = computed(() => unref(condition) ? distributeTable : userTable) /**根据渠道切换组件 */
|
|
||||||
const selectObj = computed(() => parent?.selectObj?.value)
|
|
||||||
|
|
||||||
const selectData = ref<Record<number, any[]>>({})
|
|
||||||
const channelFormRef = ref<InstanceType<typeof ElForm>>()
|
|
||||||
const componentRef = ref()
|
|
||||||
|
|
||||||
// 弹窗关闭
|
|
||||||
const handleClose = (formEl: FormInstance | undefined): void => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.resetFields()
|
|
||||||
}
|
|
||||||
// 确认选择
|
|
||||||
const handleConfirm = (): void => {
|
|
||||||
// 深度克隆防止数据串到父组件
|
|
||||||
selectData.value = {}
|
|
||||||
selectData.value[unref(channel)!] = selectObj.value![unref(channel)!]
|
|
||||||
emit('update:modelValue', selectData.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOpen = () => {
|
|
||||||
selectedTable()
|
|
||||||
}
|
|
||||||
/**表格选中效果 */
|
|
||||||
function selectedTable() {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (componentRef.value) {
|
|
||||||
const tableData = componentRef.value.pager.lists as any[]
|
|
||||||
const selectedIds = selectData.value[unref(channel)!]?.map(item => item.id) as number[]
|
|
||||||
if (selectedIds) {
|
|
||||||
const selectedList = tableData.filter(data => selectedIds.includes(data.id))
|
|
||||||
tableData.forEach(data => {
|
|
||||||
componentRef.value.tableDataRef?.toggleRowSelection(data, false)
|
|
||||||
})
|
|
||||||
selectedList.forEach(item => {
|
|
||||||
componentRef.value.tableDataRef?.toggleRowSelection(item, true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 50)
|
|
||||||
}
|
|
||||||
watch(() => unref(selectData), () => selectedTable(), { deep: true })
|
|
||||||
watch(() => componentRef.value && unref(componentRef).pager.page, () => {
|
|
||||||
selectData.value[unref(channel)!]?.length && selectedTable()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ls-input {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__inner-wrapper) {
|
|
||||||
height: 365px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: micky 1254597151@qq.com
|
|
||||||
* @Date: 2023-09-16 16:26:07
|
|
||||||
* @LastEditors: micky 1254597151@qq.com
|
|
||||||
* @LastEditTime: 2023-09-18 15:15:05
|
|
||||||
* @FilePath: \housekeeping-admin\src\components\channel-select-user\distributeTable.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-form :model="channelForm" ref="channelFormRef" :inline="true" label-width="auto">
|
|
||||||
<el-form-item label="组别">
|
|
||||||
<el-select v-model="channelForm.groupId" placeholder="请选择" class="ls-input">
|
|
||||||
<el-option label="全部" value></el-option>
|
|
||||||
<el-option
|
|
||||||
v-for="group in groupLists"
|
|
||||||
:key="group.id"
|
|
||||||
:label="group.groupName"
|
|
||||||
:value="group.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="分销员名称">
|
|
||||||
<el-input
|
|
||||||
class="ls-input"
|
|
||||||
v-model="channelForm.name"
|
|
||||||
placeholder="请输入"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="分销员ID">
|
|
||||||
<el-input
|
|
||||||
class="ls-input"
|
|
||||||
v-model="channelForm.distNum"
|
|
||||||
placeholder="请输入"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="getLists">查询</el-button>
|
|
||||||
<el-button @click="resetParams">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div>
|
|
||||||
<el-table
|
|
||||||
ref="tableDataRef"
|
|
||||||
:data="pager.lists"
|
|
||||||
row-key="id"
|
|
||||||
border
|
|
||||||
style="width: 100%"
|
|
||||||
height="500"
|
|
||||||
@selection-change="parent?.handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="50"
|
|
||||||
:reserve-selection="true"
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column property="groupName" label="组别" min-width="200" />
|
|
||||||
<el-table-column property="name" label="分销员名称" min-width="160" />
|
|
||||||
<el-table-column property="distNum" label="分销员ID" min-width="160" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end mt-3">
|
|
||||||
<pagination v-model="pager" @change="getLists" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { ElTable } from 'element-plus'
|
|
||||||
import Pagination from '@/components/pagination/index.vue'
|
|
||||||
import { usePaging } from '@/hooks/usePaging'
|
|
||||||
import { useCommon } from '@/hooks/useCommon'
|
|
||||||
import { apiDistributorLists } from '@/api/distributor/lists'
|
|
||||||
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
|
|
||||||
const tableDataRef = ref<InstanceType<typeof ElTable>>()
|
|
||||||
const channelForm = reactive({
|
|
||||||
name: '',
|
|
||||||
groupId: '',
|
|
||||||
distNum: ''
|
|
||||||
})
|
|
||||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
||||||
size: 10,
|
|
||||||
fetchFun: apiDistributorLists,
|
|
||||||
params: channelForm
|
|
||||||
})
|
|
||||||
const { groupLists, fetchGroupList } = useCommon()
|
|
||||||
|
|
||||||
const parent = inject(CHANNEL_INJECTION_KEY)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getLists()
|
|
||||||
fetchGroupList()
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
tableDataRef,
|
|
||||||
pager
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.ls-input {
|
|
||||||
width: 210px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<channel-popup v-model="selectData">
|
|
||||||
<slot name="popup"></slot>
|
|
||||||
</channel-popup>
|
|
||||||
<table-detail v-model="selectData"></table-detail>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { PropType } from 'vue'
|
|
||||||
import channelPopup from './channel-popup.vue'
|
|
||||||
import tableDetail from './table-detail.vue'
|
|
||||||
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Array as PropType<any>,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const parent = inject(CHANNEL_INJECTION_KEY)
|
|
||||||
// const channel = computed(() => parent?.channel.value)
|
|
||||||
|
|
||||||
const selectData = ref<Record<number, any[]>>({})
|
|
||||||
watch(
|
|
||||||
() => unref(selectData),
|
|
||||||
val => {
|
|
||||||
emit('update:modelValue', unref(val))
|
|
||||||
// emit('update:modelValue', val[unref(channel)!])
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: micky 1254597151@qq.com
|
|
||||||
* @Date: 2023-09-16 16:26:07
|
|
||||||
* @LastEditors: micky 1254597151@qq.com
|
|
||||||
* @LastEditTime: 2023-09-18 16:46:02
|
|
||||||
* @FilePath: \housekeeping-admin\src\components\channel-select-user\table-detail.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="mt-5" v-if="selectData.length">
|
|
||||||
<el-table ref="tableDataRef" :data="selectData" height="200">
|
|
||||||
<el-table-column
|
|
||||||
v-for="column in columns"
|
|
||||||
:key="column.prop"
|
|
||||||
:prop="column.prop"
|
|
||||||
:label="column.label"
|
|
||||||
width="160"
|
|
||||||
:formatter="row => parseEmpty(row, column.prop)"
|
|
||||||
/>
|
|
||||||
<el-table-column label="操作" width="120" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex">
|
|
||||||
<el-button type="primary" link @click="handleDeleteItem(scope.$index)">
|
|
||||||
移除
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { CHANNEL_INJECTION_KEY } from '@/config/symbol';
|
|
||||||
import { parseEmpty } from '@/utils/util'
|
|
||||||
import { ChannelEnum } from '@/enums/modeEnum';
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue?: any
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: {},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const parent = inject(CHANNEL_INJECTION_KEY)
|
|
||||||
|
|
||||||
const channel = computed(() => parent?.channel.value)
|
|
||||||
const selectData: any = computed(() => props.modelValue[unref(channel)!] || [])
|
|
||||||
|
|
||||||
const columns = ref<any[]>([])
|
|
||||||
/**生成column字段 */
|
|
||||||
function generateColumns() {
|
|
||||||
if (channel.value === ChannelEnum.DISTBUTOR) {
|
|
||||||
columns.value = [
|
|
||||||
{ prop: 'groupName', label: '组别' },
|
|
||||||
{ prop: 'name', label: '分销员名称' },
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
columns.value = [
|
|
||||||
{ prop: 'nickname', label: '用户名称' },
|
|
||||||
{ prop: 'username', label: '用户账号' },
|
|
||||||
{ prop: 'mobile', label: '手机号码' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**切换渠道生成不同的column */
|
|
||||||
watch(() => unref(channel), () => generateColumns(), { immediate: true })
|
|
||||||
|
|
||||||
const handleDeleteItem = (index: number) => {
|
|
||||||
selectData.value.splice(index, 1)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.move {
|
|
||||||
@media screen and (max-width: 1536px) {
|
|
||||||
@apply overflow-scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: micky 1254597151@qq.com
|
|
||||||
* @Date: 2023-09-16 16:26:07
|
|
||||||
* @LastEditors: micky 1254597151@qq.com
|
|
||||||
* @LastEditTime: 2023-09-18 15:14:26
|
|
||||||
* @FilePath: \housekeeping-admin\src\components\channel-select-user\userTable.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-form :model="userForm" ref="channelFormRef" :inline="true" label-width="auto">
|
|
||||||
<el-form-item label="用户信息">
|
|
||||||
<el-input class="w-[300px]" v-model="userForm.keyword" placeholder="用户名称/用户账号/手机号码" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="getLists">搜索</el-button>
|
|
||||||
<el-button @click="resetParams">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div>
|
|
||||||
<el-table
|
|
||||||
ref="tableDataRef"
|
|
||||||
:data="pager.lists"
|
|
||||||
row-key="id"
|
|
||||||
border
|
|
||||||
style="width: 100%"
|
|
||||||
height="480"
|
|
||||||
@selection-change="parent?.handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
|
|
||||||
<el-table-column property="nickname" label="用户名称" min-width="200" />
|
|
||||||
<el-table-column property="username" label="用户账号" min-width="160" />
|
|
||||||
<el-table-column property="mobile" label="手机号码" min-width="160" :formatter="row => parseEmpty(row, 'mobile')" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end mt-3">
|
|
||||||
<pagination v-model="pager" @change="getLists" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
import type { ElTable } from 'element-plus'
|
|
||||||
import Pagination from '@/components/pagination/index.vue'
|
|
||||||
import { usePaging } from '@/hooks/usePaging'
|
|
||||||
import { apiUserLists } from '@/api/user'
|
|
||||||
import { parseEmpty } from '@/utils/util'
|
|
||||||
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
|
|
||||||
const tableDataRef = ref<InstanceType<typeof ElTable>>()
|
|
||||||
const userForm = reactive({
|
|
||||||
keyword: '',
|
|
||||||
type: 0
|
|
||||||
})
|
|
||||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
||||||
size: 10,
|
|
||||||
fetchFun: apiUserLists,
|
|
||||||
params: userForm
|
|
||||||
})
|
|
||||||
const parent = inject(CHANNEL_INJECTION_KEY)
|
|
||||||
|
|
||||||
onMounted(getLists)
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
tableDataRef,
|
|
||||||
pager
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.ls-input {
|
|
||||||
width: 210px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="footer-btns">
|
|
||||||
<div class="footer-btns__content" :style="fixed ? 'position: fixed' : ''">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
defineProps({
|
|
||||||
fixed: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.footer-btns {
|
|
||||||
height: 65px;
|
|
||||||
&__content {
|
|
||||||
bottom: 0;
|
|
||||||
height: 65px;
|
|
||||||
right: 0;
|
|
||||||
left: var(--aside-width);
|
|
||||||
z-index: 999;
|
|
||||||
@apply flex justify-center items-center shadow bg-body;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
<template>
|
|
||||||
<popup
|
|
||||||
class="inline mr-3"
|
|
||||||
:clickModalClose="false"
|
|
||||||
title="选择服务"
|
|
||||||
:center="true"
|
|
||||||
@close="handleClose(serviceFormRef)"
|
|
||||||
@confirm="handleConfirm"
|
|
||||||
@open="handleOpen"
|
|
||||||
width="1050px"
|
|
||||||
>
|
|
||||||
<template #trigger>
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
<el-form :model="serviceForm" ref="serviceFormRef" :inline="true" label-width="auto">
|
|
||||||
<el-form-item label="服务名称">
|
|
||||||
<el-input
|
|
||||||
class="ls-input"
|
|
||||||
v-model="serviceForm.name"
|
|
||||||
placeholder="请输入"
|
|
||||||
clearable
|
|
||||||
></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="服务分类">
|
|
||||||
<el-select
|
|
||||||
v-model="serviceForm.categoryId"
|
|
||||||
placeholder="请选择"
|
|
||||||
class="ls-input"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="category in categoryLists"
|
|
||||||
:key="category.id"
|
|
||||||
:label="category.name"
|
|
||||||
:value="category.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="getLists">搜索</el-button>
|
|
||||||
<el-button @click="resetParams">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<el-table
|
|
||||||
ref="tableDataRef"
|
|
||||||
:data="pager.lists"
|
|
||||||
row-key="id"
|
|
||||||
border
|
|
||||||
style="width: 100%"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
height="500"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="50"
|
|
||||||
:reserve-selection="true"
|
|
||||||
></el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
property="name"
|
|
||||||
label="服务名称"
|
|
||||||
min-width="200"
|
|
||||||
show-overflow-tooltip
|
|
||||||
/>
|
|
||||||
<el-table-column property="image" label="服务图片" min-width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<el-image
|
|
||||||
style="width: 48px; height: 48px"
|
|
||||||
:src="scope.row.image"
|
|
||||||
:fit="'cover'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column property="category" label="服务分类" min-width="160" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end mt-3">
|
|
||||||
<pagination v-model="pager" @change="getLists" />
|
|
||||||
</div>
|
|
||||||
</popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, watchEffect, ref, reactive } from 'vue'
|
|
||||||
import type { ElForm, ElTable, FormInstance } from 'element-plus'
|
|
||||||
import Popup from '@/components/popup/index.vue'
|
|
||||||
import Pagination from '@/components/pagination/index.vue'
|
|
||||||
import { usePaging } from '@/hooks/usePaging'
|
|
||||||
import { apiServiceLists } from '@/api/service/lists'
|
|
||||||
import { deepClone } from '@/utils/util'
|
|
||||||
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'
|
|
||||||
|
|
||||||
interface serviceFormObj {
|
|
||||||
name?: string
|
|
||||||
status?: number | string
|
|
||||||
categoryId: number | string
|
|
||||||
}
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue: any
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: []
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const parent = inject(CHANNEL_INJECTION_KEY)
|
|
||||||
const categoryLists = computed(() => parent?.categoryLists.value)
|
|
||||||
|
|
||||||
const serviceFormRef = ref<InstanceType<typeof ElForm>>()
|
|
||||||
const tableDataRef = ref<InstanceType<typeof ElTable>>()
|
|
||||||
const selectData = ref<Array<object> | null>(props.modelValue)
|
|
||||||
const serviceForm = reactive<serviceFormObj>({
|
|
||||||
name: '',
|
|
||||||
status: '',
|
|
||||||
categoryId: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
||||||
size: 10,
|
|
||||||
fetchFun: apiServiceLists,
|
|
||||||
params: serviceForm
|
|
||||||
})
|
|
||||||
|
|
||||||
// 表格多选选择的数据
|
|
||||||
const handleSelectionChange = (val: Event | any) => {
|
|
||||||
selectData.value = val
|
|
||||||
}
|
|
||||||
|
|
||||||
// 弹窗关闭
|
|
||||||
const handleClose = (formEl: FormInstance | undefined): void => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.resetFields()
|
|
||||||
}
|
|
||||||
// 确认选择
|
|
||||||
const handleConfirm = (): void => {
|
|
||||||
// 深度克隆防止数据串到父组件
|
|
||||||
emit('update:modelValue', deepClone(selectData.value))
|
|
||||||
}
|
|
||||||
|
|
||||||
getLists()
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
selectData.value = props.modelValue
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleOpen = () => {
|
|
||||||
nextTick(() => selectTable())
|
|
||||||
}
|
|
||||||
/**表格选中效果 */
|
|
||||||
function selectTable() {
|
|
||||||
setTimeout(() => {
|
|
||||||
const tableData = pager.lists
|
|
||||||
const selectedIds = props.modelValue?.map((item: any) => item.id) as number[]
|
|
||||||
const selectedList = tableData.filter(data => selectedIds.includes(data.id))
|
|
||||||
/**避免tableDataRef为undefined */
|
|
||||||
tableData.forEach(data => {
|
|
||||||
tableDataRef.value?.toggleRowSelection(data, false)
|
|
||||||
})
|
|
||||||
selectedList.forEach(item => {
|
|
||||||
tableDataRef.value?.toggleRowSelection(item, true)
|
|
||||||
})
|
|
||||||
}, 50)
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
() => selectTable(),
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
watch(
|
|
||||||
() => pager.page,
|
|
||||||
() => props.modelValue.length && selectTable()
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ls-input {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__inner-wrapper) {
|
|
||||||
height: 365px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<good-popup v-model="selectData">
|
|
||||||
<slot name="popup"></slot>
|
|
||||||
</good-popup>
|
|
||||||
<table-detail v-model="selectData" :disabled="disabled"></table-detail>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import goodPopup from './good-popup.vue'
|
|
||||||
import tableDetail from './table-detail.vue'
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue?: any
|
|
||||||
selectData: any
|
|
||||||
disabled?: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: [],
|
|
||||||
selectData: [],
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const emit = defineEmits(['update:modelValue', 'update:selectData'])
|
|
||||||
|
|
||||||
const selectData: any = computed({
|
|
||||||
get: () => {
|
|
||||||
return props.selectData || []
|
|
||||||
},
|
|
||||||
set: (value) => {
|
|
||||||
emit(
|
|
||||||
'update:modelValue',
|
|
||||||
value.map((item: Event | any) => item.id)
|
|
||||||
)
|
|
||||||
emit('update:selectData', value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: micky 1254597151@qq.com
|
|
||||||
* @Date: 2023-09-16 16:26:07
|
|
||||||
* @LastEditors: micky 1254597151@qq.com
|
|
||||||
* @LastEditTime: 2023-09-18 16:48:12
|
|
||||||
* @FilePath: \housekeeping-admin\src\components\good-select\table-detail.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="mt-5" v-if="selectData.length">
|
|
||||||
<el-table ref="tableDataRef" :data="selectData" height="200">
|
|
||||||
<el-table-column label="服务名称" width="240">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="w-[60px] h-[60px]">
|
|
||||||
<el-image
|
|
||||||
style="width: 60px; height: 60px"
|
|
||||||
:src="scope.row.image"
|
|
||||||
:fit="'cover'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-tooltip :content="scope.row.name" placement="top">
|
|
||||||
<div class="ml-2 truncate">{{ scope.row.name }}</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column property="category" label="服务分类" width="200" />
|
|
||||||
<el-table-column label="操作" width="120" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex">
|
|
||||||
<el-button type="primary" link @click="handleDeleteItem(scope.$index)"
|
|
||||||
:disabled="disabled">移除</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue: any
|
|
||||||
disabled: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: [],
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
const selectData: any = computed(() => {
|
|
||||||
return props.modelValue || []
|
|
||||||
})
|
|
||||||
const handleDeleteItem = (index: number) => {
|
|
||||||
selectData.value.splice(index, 1)
|
|
||||||
emit('update:modelValue', selectData.value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.move {
|
|
||||||
@media screen and (max-width: 1536px) {
|
|
||||||
@apply overflow-scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<template>
|
|
||||||
<popup class="mr-2 flex" :clickModalClose="false" :title="title" :center="true" width="450px" confirmButtonText="" cancelButtonText="关闭">
|
|
||||||
<template #trigger>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" link>{{ btnText }}</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<el-form :model="dataForm" ref="formRef" :inline="true" label-width="auto" :disabled="true">
|
|
||||||
<el-form-item label="已提现金额">
|
|
||||||
<el-input v-model="dataForm.alreadyWithdraw">
|
|
||||||
<template #append>元</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="可提现金额">
|
|
||||||
<el-input v-model="dataForm.canWithdrawCommission">
|
|
||||||
<template #append>元</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="待结算金额">
|
|
||||||
<el-input v-model="dataForm.toBeSettledMoney">
|
|
||||||
<template #append>元</template>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, reactive, toRefs, onMounted } from 'vue'
|
|
||||||
const title = ref('查看金额详情')
|
|
||||||
const dataForm = reactive({
|
|
||||||
alreadyWithdraw: '',
|
|
||||||
canWithdrawCommission: '',
|
|
||||||
toBeSettledMoney: ''
|
|
||||||
})
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
rowData: any
|
|
||||||
btnText: string
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
rowData: {},
|
|
||||||
btnText: ''
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const showDetail = (row: any) => {
|
|
||||||
const keys = Object.keys(dataForm)
|
|
||||||
keys.map(key => {
|
|
||||||
dataForm[key] = row[key] || '0'
|
|
||||||
})
|
|
||||||
title.value = `${row.name}-金额详情`
|
|
||||||
}
|
|
||||||
|
|
||||||
showDetail(props.rowData)
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: micky 1254597151@qq.com
|
|
||||||
* @Date: 2023-08-14 15:56:31
|
|
||||||
* @LastEditors: micky 1254597151@qq.com
|
|
||||||
* @LastEditTime: 2023-09-04 17:26:11
|
|
||||||
* @FilePath: \housekeeping-admin\src\components\service-area\index.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<!-- 服务选择框 Start -->
|
|
||||||
<area-popup v-model="selectData">
|
|
||||||
<slot name="popup"></slot>
|
|
||||||
</area-popup>
|
|
||||||
<!-- 服务选择框 End -->
|
|
||||||
|
|
||||||
<!-- Table Start -->
|
|
||||||
<table-detail v-model="selectData" :disabled="disabled"></table-detail>
|
|
||||||
<!-- Table End -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { withDefaults, computed } from 'vue'
|
|
||||||
// import areaPopup from './area-popup.vue'
|
|
||||||
import tableDetail from './table-detail.vue'
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue?: any
|
|
||||||
selectData: any
|
|
||||||
disabled?: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: [],
|
|
||||||
selectData: [],
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const emit = defineEmits(['update:modelValue', 'update:selectData'])
|
|
||||||
|
|
||||||
const selectData: any = computed({
|
|
||||||
get: () => {
|
|
||||||
return props.selectData || []
|
|
||||||
},
|
|
||||||
set: value => {
|
|
||||||
emit(
|
|
||||||
'update:modelValue',
|
|
||||||
value.map((item: Event | any) => item.id)
|
|
||||||
)
|
|
||||||
emit('update:selectData', value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="mt-5" v-if="selectData.length">
|
|
||||||
<el-table ref="tableDataRef" :data="selectData">
|
|
||||||
<el-table-column property="name" label="服务区名称" width="240">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" width="120" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex">
|
|
||||||
<el-button type="primary" link @click="handleDeleteItem(scope.$index)"
|
|
||||||
:disabled="disabled">移除</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, withDefaults } from 'vue'
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue: any
|
|
||||||
disabled: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: [],
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const selectData: any = computed(() => {
|
|
||||||
return props.modelValue || []
|
|
||||||
})
|
|
||||||
const handleDeleteItem = (index: number) => {
|
|
||||||
selectData.value.splice(index, 1)
|
|
||||||
emit('update:modelValue', selectData.value)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<!-- 服务选择框 Start -->
|
|
||||||
<service-popup v-model="selectData">
|
|
||||||
<slot name="popup"></slot>
|
|
||||||
</service-popup>
|
|
||||||
<!-- 服务选择框 End -->
|
|
||||||
|
|
||||||
<!-- Table Start -->
|
|
||||||
<table-detail v-model="selectData" :disabled="disabled"></table-detail>
|
|
||||||
<!-- Table End -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { withDefaults, computed } from 'vue'
|
|
||||||
import servicePopup from './service-popup.vue'
|
|
||||||
import tableDetail from './table-detail.vue'
|
|
||||||
|
|
||||||
/** Props Start **/
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue?: any
|
|
||||||
selectData: any
|
|
||||||
disabled?: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: [],
|
|
||||||
selectData: [],
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
/** Props End **/
|
|
||||||
|
|
||||||
/** Emit Start **/
|
|
||||||
const emit = defineEmits(['update:modelValue', 'update:selectData'])
|
|
||||||
/** Emit End **/
|
|
||||||
|
|
||||||
/** Computed Start **/
|
|
||||||
const selectData: any = computed({
|
|
||||||
get: () => {
|
|
||||||
return props.selectData || []
|
|
||||||
},
|
|
||||||
set: (value) => {
|
|
||||||
emit(
|
|
||||||
'update:modelValue',
|
|
||||||
value.map((item: Event | any) => item.id)
|
|
||||||
)
|
|
||||||
emit('update:selectData', value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
/** Computed End **/
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- <style lang="scss" scoped>
|
|
||||||
.move {
|
|
||||||
@media screen and (max-width: 1536px) {
|
|
||||||
@apply overflow-scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style> -->
|
|
||||||
|
|
@ -1,170 +0,0 @@
|
||||||
<template>
|
|
||||||
<popup class="inline mr-3" :clickModalClose="false" title="选择服务" :center="true" @close="handleClose(serviceFormRef)"
|
|
||||||
@confirm="handleConfirm" @open="toggleSelection" width="1150px">
|
|
||||||
<!-- Trigger Start -->
|
|
||||||
<template #trigger>
|
|
||||||
<!-- trigger -->
|
|
||||||
<slot></slot>
|
|
||||||
</template>
|
|
||||||
<!-- Trigger End -->
|
|
||||||
|
|
||||||
<!-- Form Start -->
|
|
||||||
<el-form :model="serviceForm" ref="serviceFormRef" :inline="true" label-width="auto">
|
|
||||||
<el-form-item label="服务名称">
|
|
||||||
<el-input class="ls-input" v-model="serviceForm.name" placeholder="请输入"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="状态">
|
|
||||||
<el-select v-model="serviceForm.status" placeholder="请选择" class="ls-input">
|
|
||||||
<el-option label="全部" value></el-option>
|
|
||||||
<el-option label="销售中" value="1"></el-option>
|
|
||||||
<el-option label="仓库中" value="0"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="getLists">搜索</el-button>
|
|
||||||
<el-button @click="resetParams">重置</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<!-- Form End -->
|
|
||||||
|
|
||||||
<!-- Table Start -->
|
|
||||||
<div>
|
|
||||||
<el-table ref="tableDataRef" :data="pager.lists" :row-key="getRowKeys" border style="width: 100%">
|
|
||||||
<el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
|
|
||||||
<el-table-column label="服务名称" min-width="200">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<el-image style="width: 48px; height: 48px" :src="scope.row.image" :fit="'cover'" />
|
|
||||||
|
|
||||||
<el-tooltip :content="scope.row.name" placement="top">
|
|
||||||
<div class="w-16 ml-2 truncate">{{ scope.row.name }}</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column property="category" label="服务分类" min-width="160" />
|
|
||||||
<el-table-column property="price" label="价格" min-width="100" />
|
|
||||||
<el-table-column property="unit" label="单位" min-width="100" />
|
|
||||||
<el-table-column property="statusDesc" label="状态" min-width="120">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag type="success" v-if="scope.row.status == 1">销售中</el-tag>
|
|
||||||
<el-tag type="info" v-if="scope.row.status == 0">仓库中</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column property="createTime" label="创建日期" min-width="170" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<!-- Table End -->
|
|
||||||
|
|
||||||
<!-- Footer Pagination Start -->
|
|
||||||
<div class="flex justify-end mt-2">
|
|
||||||
<pagination v-model="pager" @change="getLists" />
|
|
||||||
</div>
|
|
||||||
<!-- Footer Pagination End -->
|
|
||||||
</popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { apiServiceLists } from '@/api/service/lists'
|
|
||||||
import Popup from '@/components/popup/index.vue'
|
|
||||||
import Pagination from '@/components/pagination/index.vue'
|
|
||||||
import type { ElForm } from 'element-plus'
|
|
||||||
import { ElTable } from 'element-plus'
|
|
||||||
import { usePaging } from '@/hooks/usePaging'
|
|
||||||
import { deepClone } from '@/utils/util'
|
|
||||||
import { computed, withDefaults, watchEffect, ref, reactive } from 'vue'
|
|
||||||
|
|
||||||
interface serviceFormObj {
|
|
||||||
name?: string
|
|
||||||
status?: number | string
|
|
||||||
}
|
|
||||||
type FormInstance = InstanceType<typeof ElForm>
|
|
||||||
const serviceFormRef = ref<FormInstance>()
|
|
||||||
const tableDataRef = ref<InstanceType<typeof ElTable>>()
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue: any
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: []
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
|
|
||||||
const selectData = ref<Array<object> | null>(props.modelValue)
|
|
||||||
const serviceForm = reactive<serviceFormObj>({
|
|
||||||
name: '',
|
|
||||||
status: '1'
|
|
||||||
})
|
|
||||||
|
|
||||||
const toggleSelection = () => {
|
|
||||||
if (selectData.value!.length !== 0) {
|
|
||||||
pager.lists.forEach(item => {
|
|
||||||
tableDataRef.value?.toggleRowSelection(item, false)
|
|
||||||
})
|
|
||||||
; (selectData.value as []).forEach((item: any) => {
|
|
||||||
try {
|
|
||||||
pager.lists.forEach(listItem => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (listItem.id == item.id) {
|
|
||||||
tableDataRef?.value?.toggleRowSelection(listItem, true) //让页面显示选中的数据
|
|
||||||
// throw Error() //通过抛出异常跳过foreach循环
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} catch { }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
tableDataRef.value?.clearSelection()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
||||||
size: 10,
|
|
||||||
fetchFun: apiServiceLists,
|
|
||||||
params: serviceForm,
|
|
||||||
nextFetchFun: toggleSelection
|
|
||||||
})
|
|
||||||
|
|
||||||
// 表格多选选择的数据
|
|
||||||
// const handleSelectionChange = (val: Event | any) => {
|
|
||||||
// selectData.value = [...val]
|
|
||||||
// console.log('selectData.value', val)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 弹窗关闭
|
|
||||||
const handleClose = (formEl: FormInstance | undefined): void => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.resetFields()
|
|
||||||
}
|
|
||||||
// 确认选择
|
|
||||||
const handleConfirm = (): void => {
|
|
||||||
// 深度克隆防止数据串到父组件
|
|
||||||
emit('update:modelValue', tableDataRef?.value?.getSelectionRows())
|
|
||||||
}
|
|
||||||
|
|
||||||
getLists()
|
|
||||||
|
|
||||||
watchEffect(() => {
|
|
||||||
selectData.value = props.modelValue
|
|
||||||
})
|
|
||||||
|
|
||||||
// 用于跨页多选
|
|
||||||
const getRowKeys = row => {
|
|
||||||
return row.id
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ls-input {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__inner-wrapper) {
|
|
||||||
height: 565px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
<!--
|
|
||||||
* @Author: micky 1254597151@qq.com
|
|
||||||
* @Date: 2023-08-14 15:56:31
|
|
||||||
* @LastEditors: micky 1254597151@qq.com
|
|
||||||
* @LastEditTime: 2023-09-12 12:13:41
|
|
||||||
* @FilePath: \housekeeping-admin\src\components\service-select\table-detail.vue
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="mt-5" v-if="selectData.length">
|
|
||||||
<el-table ref="tableDataRef" :data="selectData">
|
|
||||||
<el-table-column label="服务名称" width="240">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="w-[60px] h-[60px]">
|
|
||||||
<el-image style="width: 60px; height: 60px" :src="scope.row.image" :fit="'cover'" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-tooltip :content="scope.row.name" placement="top">
|
|
||||||
<div class="ml-2 truncate">{{ scope.row.name }}</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column property="category" label="服务分类" width="200" />
|
|
||||||
<el-table-column property="price" label="价格" width="120" />
|
|
||||||
<el-table-column property="unit" label="单位" width="220" />
|
|
||||||
<el-table-column property="statusDesc" label="销售状态" width="200">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag type="success" v-if="scope.row.status == 1">销售中</el-tag>
|
|
||||||
<el-tag type="info" v-if="scope.row.status == 0">仓库中</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="createTime" label="创建日期" min-width="205" />
|
|
||||||
<el-table-column label="操作" width="120" fixed="right">
|
|
||||||
<template #default="scope">
|
|
||||||
<div class="flex">
|
|
||||||
<el-button type="primary" link @click="handleDeleteItem(scope.$index)" :disabled="disabled">移除</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { computed, withDefaults } from 'vue'
|
|
||||||
|
|
||||||
/** Props Start **/
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
modelValue: any
|
|
||||||
disabled: boolean
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
modelValue: [],
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
/** Props End **/
|
|
||||||
|
|
||||||
/** Emit Start **/
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
|
||||||
/** Emit End **/
|
|
||||||
|
|
||||||
/** Computed Start **/
|
|
||||||
const selectData: any = computed(() => {
|
|
||||||
return props.modelValue || []
|
|
||||||
})
|
|
||||||
/** Computed End **/
|
|
||||||
|
|
||||||
/** Methods Start **/
|
|
||||||
const handleDeleteItem = (index: number) => {
|
|
||||||
selectData.value.splice(index, 1)
|
|
||||||
emit('update:modelValue', selectData.value)
|
|
||||||
}
|
|
||||||
/** Methods End **/
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.move {
|
|
||||||
@media screen and (max-width: 1536px) {
|
|
||||||
@apply overflow-scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.el-table) {
|
|
||||||
max-height: 565px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue