|
@@ -12,6 +12,11 @@ const props = defineProps({
|
|
|
list: {
|
|
|
type: Array,
|
|
|
default: () => []
|
|
|
+ },
|
|
|
+ // 是否是管理分组
|
|
|
+ isManage: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -23,7 +28,7 @@ const isDisabled = ref(false)
|
|
|
const currentSelect = ref([])
|
|
|
|
|
|
// 冒泡事件名
|
|
|
-const emits = defineEmits(['emitDisabled', 'onChange', 'onAdd', 'onEdit'])
|
|
|
+const emits = defineEmits(['emitDisabled', 'onChange', 'add', 'edit', 'delete'])
|
|
|
|
|
|
onMounted(() => {
|
|
|
initData()
|
|
@@ -53,6 +58,7 @@ function initData() {
|
|
|
input: '',
|
|
|
showEdit: false,
|
|
|
canEdit: v.isPut,
|
|
|
+ count: v.count,
|
|
|
checked: currentSelect.value.length
|
|
|
? currentSelect.value.includes(v.id)
|
|
|
: v.isSelect
|
|
@@ -112,13 +118,19 @@ function onItemConfirm(item) {
|
|
|
if (!item.input) {
|
|
|
return that.$toast('请输入分组名称')
|
|
|
}
|
|
|
- if (list.some((v) => v.name === item.input)) {
|
|
|
+ if (list.some((v) => v.name === item.input) && item.input !== item.name) {
|
|
|
return that.$toast('分组名称已存在')
|
|
|
}
|
|
|
- item.name = item.input
|
|
|
- item.showEdit = false
|
|
|
- isDisabled.value = false
|
|
|
- emits('edit', { groupId: item.id, name: item.name })
|
|
|
+ if (item.input !== item.name) {
|
|
|
+ item.name = item.input
|
|
|
+ item.showEdit = false
|
|
|
+ isDisabled.value = false
|
|
|
+ emits('edit', { groupId: item.id, name: item.name })
|
|
|
+ } else {
|
|
|
+ console.log('分组名称未修改')
|
|
|
+ item.showEdit = false
|
|
|
+ isDisabled.value = false
|
|
|
+ }
|
|
|
}
|
|
|
// 单项编辑取消方法
|
|
|
function onItemCancel(item) {
|
|
@@ -127,6 +139,7 @@ function onItemCancel(item) {
|
|
|
}
|
|
|
// 分组名称选中事件
|
|
|
function changeGroupState(item) {
|
|
|
+ if (props.isManage) return
|
|
|
const list = groupList.value
|
|
|
if (item.name === '默认分组') {
|
|
|
list.forEach((v) => {
|
|
@@ -174,6 +187,12 @@ function setGroupSelected(data) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+// 删除分组
|
|
|
+function onDeleteGroup(item) {
|
|
|
+ if (!props.isManage) return
|
|
|
+ emits('delete', { groupId: item.id, name: item.name })
|
|
|
+}
|
|
|
+
|
|
|
defineExpose({
|
|
|
getSelected
|
|
|
})
|
|
@@ -192,6 +211,7 @@ defineExpose({
|
|
|
maxlength="15"
|
|
|
autofocus
|
|
|
@keyup.enter.native="onAddConfirm"
|
|
|
+ @click.stop.native
|
|
|
>
|
|
|
<template #suffix>
|
|
|
<span class="el-input__count">
|
|
@@ -205,15 +225,15 @@ defineExpose({
|
|
|
</template>
|
|
|
</el-input>
|
|
|
<div class="flex flex-items-center add-action">
|
|
|
- <span class="add-confirm" @click="onAddConfirm">确定</span>
|
|
|
- <span class="add-cancel" @click="onAddCancel">取消</span>
|
|
|
+ <span class="add-confirm" @click.stop="onAddConfirm">确定</span>
|
|
|
+ <span class="add-cancel" @click.stop="onAddCancel">取消</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-button
|
|
|
v-else
|
|
|
type="text"
|
|
|
icon="el-icon-plus"
|
|
|
- @click="onAddAction"
|
|
|
+ @click.stop="onAddAction"
|
|
|
class="add-btn"
|
|
|
>
|
|
|
新增分组
|
|
@@ -225,27 +245,51 @@ defineExpose({
|
|
|
v-if="!item.showEdit"
|
|
|
class="flex flex-(items-center justify-between) item-name-container"
|
|
|
:class="{ 'item-name-checked': item.checked }"
|
|
|
- @click="changeGroupState(item)"
|
|
|
+ @click.stop="changeGroupState(item)"
|
|
|
>
|
|
|
<div class="flex flex-items-center flex-1">
|
|
|
- <div
|
|
|
- v-if="item.name === '默认分组'"
|
|
|
- class="j-radio"
|
|
|
- :class="item.checked ? 'r-checked' : ''"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- v-else
|
|
|
- class="j-checkbox"
|
|
|
- :class="item.checked ? 'checked' : ''"
|
|
|
- ></div>
|
|
|
- <span class="item-name" :data-id="item.id">{{ item.name }}</span>
|
|
|
+ <div v-if="!isManage" class="flex flex-items-center">
|
|
|
+ <span
|
|
|
+ v-if="item.name === '默认分组'"
|
|
|
+ class="j-radio"
|
|
|
+ :class="item.checked ? 'r-checked' : ''"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ v-else
|
|
|
+ class="j-checkbox"
|
|
|
+ :class="item.checked ? 'checked' : ''"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <span class="item-name" :data-id="item.id"
|
|
|
+ >{{ item.name
|
|
|
+ }}<em v-if="isManage">({{ item.count }})</em></span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- 管理分组 -->
|
|
|
+ <div v-if="isManage" class="flex flex-items-center">
|
|
|
+ <span
|
|
|
+ class="item-manage-edit"
|
|
|
+ v-if="item.canEdit"
|
|
|
+ @click.stop="onEditGroup(item)"
|
|
|
+ >编辑</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="item.canEdit"
|
|
|
+ class="item-delete"
|
|
|
+ @click.stop="onDeleteGroup(item)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 非管理分组 -->
|
|
|
+ <div v-else>
|
|
|
+ <span
|
|
|
+ class="item-edit"
|
|
|
+ v-if="item.canEdit"
|
|
|
+ @click.stop="onEditGroup(item)"
|
|
|
+ >编辑</span
|
|
|
+ >
|
|
|
</div>
|
|
|
- <span
|
|
|
- class="item-edit"
|
|
|
- v-if="item.canEdit"
|
|
|
- @click.stop="onEditGroup(item)"
|
|
|
- >编辑</span
|
|
|
- >
|
|
|
</div>
|
|
|
<div
|
|
|
v-else
|
|
@@ -259,6 +303,7 @@ defineExpose({
|
|
|
autofocus
|
|
|
@input="onItemInput($event, item)"
|
|
|
@keyup.enter.native="onItemConfirm(item)"
|
|
|
+ @click.stop.native
|
|
|
>
|
|
|
<template #suffix>
|
|
|
<span class="el-input__count">
|
|
@@ -272,8 +317,12 @@ defineExpose({
|
|
|
</template>
|
|
|
</el-input>
|
|
|
<div class="flex items-center add-action">
|
|
|
- <span class="add-confirm" @click="onItemConfirm(item)">确定</span>
|
|
|
- <span class="add-cancel" @click="onItemCancel(item)">取消</span>
|
|
|
+ <span class="add-confirm" @click.stop="onItemConfirm(item)"
|
|
|
+ >确定</span
|
|
|
+ >
|
|
|
+ <span class="add-cancel" @click.stop="onItemCancel(item)"
|
|
|
+ >取消</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -341,6 +390,17 @@ defineExpose({
|
|
|
cursor: pointer;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
+ .item-manage-edit {
|
|
|
+ color: $color_main;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .item-delete {
|
|
|
+ margin-left: 12px;
|
|
|
+ color: #1d1d1d;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
.group-item {
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
@@ -444,6 +504,12 @@ defineExpose({
|
|
|
background-image: url('~@/assets/images/icon/checkbox_checked_disabled.png');
|
|
|
}
|
|
|
}
|
|
|
+ .item-manage-edit,
|
|
|
+ .item-delete {
|
|
|
+ color: #999999;
|
|
|
+ pointer-events: none;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|