You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
11 months ago
|
<template>
|
||
|
<el-dialog
|
||
|
width="600"
|
||
|
append-to-body
|
||
|
v-model="dialogVisible"
|
||
|
:center="true"
|
||
|
custom-class="KnowledgeDelete"
|
||
|
><!-- 使用自定义头部组件 -->
|
||
|
<template v-slot:header>
|
||
|
<div class="KnowledgeDelete-header">
|
||
|
<img :src="delIcon" alt="" />
|
||
|
<span>知识删除</span>
|
||
|
</div>
|
||
|
</template>
|
||
|
<div class="withdraw-content">
|
||
|
<div class="label">删除原因</div>
|
||
|
<el-input
|
||
|
v-model="reason"
|
||
|
maxlength="200"
|
||
|
:rows="4"
|
||
|
placeholder="请输入"
|
||
|
show-word-limit
|
||
|
type="textarea"
|
||
|
/>
|
||
|
<div class="footer-btn">
|
||
|
<div class="cancel_btn" @click="dialogVisible = false">取消</div>
|
||
|
<!-- <div class="determine_btn">确定</div> -->
|
||
|
<el-button
|
||
|
size="large"
|
||
|
@click="submit"
|
||
|
style="width: 140px; margin: 0"
|
||
|
class="footer-btn"
|
||
|
type="primary"
|
||
|
>确定</el-button
|
||
|
>
|
||
|
</div>
|
||
|
</div>
|
||
|
</el-dialog>
|
||
|
</template>
|
||
|
<script setup lang="ts">
|
||
|
import { ref } from "vue";
|
||
|
import delIcon from "@/assets/knowledge/del.png";
|
||
|
import { message } from "@/utils/message";
|
||
|
const dialogVisible = ref(false);
|
||
|
const reason = ref("");
|
||
|
defineExpose({
|
||
|
open(val) {
|
||
|
id.value = val;
|
||
|
dialogVisible.value = true;
|
||
|
}
|
||
|
});
|
||
|
const id = ref("");
|
||
|
const closeDialog = () => {
|
||
|
dialogVisible.value = false;
|
||
|
};
|
||
|
const emit = defineEmits(["delOk"]);
|
||
|
const submit = () => {
|
||
|
if (reason.value) {
|
||
|
emit("delOk", id.value, reason.value);
|
||
|
closeDialog();
|
||
|
} else {
|
||
|
message("请填写原因", { type: "error" });
|
||
|
}
|
||
|
};
|
||
|
</script>
|
||
|
<style lang="scss" scoped>
|
||
|
.KnowledgeDelete-header {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
padding: 0 24px;
|
||
|
height: 76px;
|
||
|
border-bottom: 1px solid rgba(91, 139, 255, 0.3);
|
||
|
position: relative;
|
||
|
width: 100%;
|
||
|
span {
|
||
|
font-weight: bold;
|
||
|
font-size: 20px;
|
||
|
color: #333333;
|
||
|
}
|
||
|
img {
|
||
|
width: 28px;
|
||
|
height: 28px;
|
||
|
margin-right: 16px;
|
||
|
}
|
||
|
}
|
||
|
:deep(.el-dialog__header) {
|
||
|
padding: 0;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.withdraw-content {
|
||
|
.label {
|
||
|
font-size: 16px;
|
||
|
color: #333333;
|
||
|
margin-bottom: 16px;
|
||
|
}
|
||
|
.desc {
|
||
|
margin-top: 8px;
|
||
|
font-size: 14px;
|
||
|
color: #b4b4b4;
|
||
|
}
|
||
|
}
|
||
|
</style>
|