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

<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>