92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<!--
|
|
* @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>
|