feat: 房型管理
This commit is contained in:
kongbeiwu
@@ -2,17 +2,153 @@
|
|||||||
* @Author: kongbeiwu lishaohua-520@qq.com
|
* @Author: kongbeiwu lishaohua-520@qq.com
|
||||||
* @Date: 2025-12-22 01:11:57
|
* @Date: 2025-12-22 01:11:57
|
||||||
* @LastEditors: kongbeiwu lishaohua-520@qq.com
|
* @LastEditors: kongbeiwu lishaohua-520@qq.com
|
||||||
* @LastEditTime: 2025-12-22 01:24:19
|
* @LastEditTime: 2026-01-04 17:01:44
|
||||||
* @FilePath: /project/zn-ai/src/renderer/views/knowledge/components/EventManagement/index.vue
|
* @FilePath: /project/zn-ai/src/renderer/views/knowledge/components/EventManagement/index.vue
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>房型管理22</div>
|
<div class="mt-[10px]">
|
||||||
|
<div>
|
||||||
|
<el-input v-model="input1" style="width: 240px" size="large" placeholder="请输入" :prefix-icon="Search" />
|
||||||
|
<el-button type="primary" class="ml-[20px]" size="large">搜索</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="zn-table mt-[20px]">
|
||||||
|
<el-table :data="tableData" class="zn-table" style="width: 100%">
|
||||||
|
<el-table-column prop="pms" label="PMS" width="180" align="center" />
|
||||||
|
<el-table-column prop="xc" label="携程" width="180" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-for="(tag, index) in scope.row.xc" :key="index" type="info" closable :disable-transitions="false"
|
||||||
|
@close="handleClose(scope.$index, index, 'xc')" class="mb-[10px] mr-[8px]">
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-input v-if="tableIndex === scope.$index + 'xc'" ref="InputRef" v-model="inputValue" class="w-20" size="small"
|
||||||
|
@keyup.enter="handleInputConfirm(scope.$index, 'xc')" @blur="handleInputConfirm(scope.$index, 'xc')" />
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index, 'xc')" :icon="Plus" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="fz" label="飞猪" width="180" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-for="(tag, index) in scope.row.fz" :key="index" type="info" closable :disable-transitions="false"
|
||||||
|
@close="handleClose(scope.$index, index, 'fz')" class="mb-[10px] mr-[8px]">
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-input v-if="tableIndex === scope.$index + 'fz'" ref="InputRef" v-model="inputValue" class="w-20" size="small"
|
||||||
|
@keyup.enter="handleInputConfirm(scope.$index, 'fz')" @blur="handleInputConfirm(scope.$index, 'fz')" />
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index, 'fz')" :icon="Plus" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="qne" label="去哪儿" width="180" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-for="(tag, index) in scope.row.qne" :key="index" type="info" closable :disable-transitions="false"
|
||||||
|
@close="handleClose(scope.$index, index, 'qne')" class="mb-[10px] mr-[8px]">
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-input v-if="tableIndex === scope.$index + 'qne'" ref="InputRef" v-model="inputValue" class="w-20" size="small"
|
||||||
|
@keyup.enter="handleInputConfirm(scope.$index, 'qne')" @blur="handleInputConfirm(scope.$index, 'qne')" />
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index, 'qne')" :icon="Plus" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dy" label="抖音" width="180" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-for="(tag, index) in scope.row.dy" :key="index" type="info" closable :disable-transitions="false"
|
||||||
|
@close="handleClose(scope.$index, index, 'dy')" class="mb-[10px] mr-[8px]">
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-input v-if="tableIndex === scope.$index + 'dy'" ref="InputRef" v-model="inputValue" class="w-20" size="small"
|
||||||
|
@keyup.enter="handleInputConfirm(scope.$index, 'dy')" @blur="handleInputConfirm(scope.$index, 'dy')" />
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index, 'dy')" :icon="Plus" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="mt" label="美团" width="180" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-for="(tag, index) in scope.row.mt" :key="index" type="info" closable :disable-transitions="false"
|
||||||
|
@close="handleClose(scope.$index, index, 'mt')" class="mb-[10px] mr-[8px]">
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-input v-if="tableIndex === scope.$index + 'mt'" ref="InputRef" v-model="inputValue" class="w-20" size="small"
|
||||||
|
@keyup.enter="handleInputConfirm(scope.$index, 'mt')" @blur="handleInputConfirm(scope.$index, 'mt')" />
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index, 'mt')" :icon="Plus" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, nextTick } from 'vue';
|
||||||
|
import { Search, Plus } from '@element-plus/icons-vue';
|
||||||
|
import type { InputInstance } from 'element-plus';
|
||||||
|
const input1 = ref('');
|
||||||
|
|
||||||
|
type TableData = {
|
||||||
|
pms: string
|
||||||
|
xc: string[]
|
||||||
|
fz: string[]
|
||||||
|
qne: string[]
|
||||||
|
dy: string[]
|
||||||
|
mt: string[]
|
||||||
|
}
|
||||||
|
const tableData: TableData[] = ref([
|
||||||
|
{
|
||||||
|
pms: '大床房',
|
||||||
|
xc: ['雅致大床房', '标准间'],
|
||||||
|
mt: ['雅致大床房'],
|
||||||
|
fz: ['雅致大床房'],
|
||||||
|
qne: ['雅致大床房'],
|
||||||
|
dy: ['雅致大床房'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
pms: '标准间',
|
||||||
|
xc: ['雅致大床房'],
|
||||||
|
mt: ['雅致大床房'],
|
||||||
|
fz: ['雅致大床房'],
|
||||||
|
qne: ['雅致大床房'],
|
||||||
|
dy: ['雅致大床房'],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const inputValue = ref('');
|
||||||
|
const InputRef = ref<InputInstance>()
|
||||||
|
const handleClose = (row: number, index: number, key: string) => {
|
||||||
|
tableData.value[row][key].splice(index, 1);
|
||||||
|
};
|
||||||
|
const tableIndex = ref('');
|
||||||
|
const showInput = (index: any, key: string) => {
|
||||||
|
tableIndex.value = index + key;
|
||||||
|
nextTick(() => {
|
||||||
|
InputRef.value!.input!.focus();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputConfirm = (index: number, key: string) => {
|
||||||
|
if (inputValue.value) {
|
||||||
|
tableData.value[index][key].push(inputValue.value);
|
||||||
|
}
|
||||||
|
tableIndex.value = '';
|
||||||
|
inputValue.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style scoped>
|
||||||
|
:deep(.el-table tr td:nth-of-type(1)) {
|
||||||
|
background: #EFF6FF !important;
|
||||||
|
}
|
||||||
|
:deep(.el-tag) {
|
||||||
|
background: #FFFFFF!important;
|
||||||
|
border-radius: 6px!important;
|
||||||
|
border: 1px solid #E5E8EE!important;
|
||||||
|
color: #525866;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user