You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
7.9 KiB
301 lines
7.9 KiB
<!--
|
|
@ 作者: 鲁智强
|
|
@ 时间: 2023-08-15 11:34:38
|
|
@ 备注:
|
|
-->
|
|
<template>
|
|
<el-dialog :model-value="true" :title="title" @close="handleClose">
|
|
<el-form
|
|
ref="ruleFormRef"
|
|
:model="formData"
|
|
label-width="120px"
|
|
class="demo-ruleForm"
|
|
>
|
|
<el-form-item label="文章标题:" prop="name" :rules="nameRules">
|
|
<el-input v-model="formData.name" placeholder="请输入标题"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属栏目：" prop="sex">
|
|
<el-select v-model="formData.sex">
|
|
<el-option label="工艺技术" value="工艺技术" />
|
|
<el-option label="流程制度" value="流程制度" />
|
|
<el-option label="设备管理" value="设备管理" />
|
|
<el-option label="仪控仪表" value="仪控仪表" />
|
|
<el-option label="机电维修" value="机电维修" />
|
|
<el-option label="安全生产" value="安全生产" />
|
|
<el-option label="质量管理" value="质量管理" />
|
|
<el-option label="财务管理" value="财务管理" />
|
|
<el-option label="人力资源" value="人力资源" />
|
|
<el-option label="仓储物流" value="仓储物流" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="文档来源">
|
|
<el-radio-group v-model="formData.iop">
|
|
<el-radio label="1" size="large" border>原创</el-radio>
|
|
<el-radio label="2" size="large" border>转贴</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="上传封面">
|
|
<el-upload action="#" list-type="picture-card" :auto-upload="false" :on-success="handleAvatar">
|
|
<el-icon><Plus /></el-icon>
|
|
<template #file="{ file }">
|
|
<div>
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
<span class="el-upload-list__item-actions">
|
|
<span
|
|
class="el-upload-list__item-preview"
|
|
@click="handlePictureCardPreview(file)"
|
|
>
|
|
<el-icon><zoom-in /></el-icon>
|
|
</span>
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleDownload(file)"
|
|
>
|
|
<el-icon><Download /></el-icon>
|
|
</span>
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleRemove(file)"
|
|
>
|
|
<el-icon><Delete /></el-icon>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
<el-dialog v-model="dialogVis">
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
</el-dialog>
|
|
</el-form-item>
|
|
<el-form-item label="文档标签：">
|
|
<el-input
|
|
v-model="formData.ccc"
|
|
placeholder="请输入文本文档，每个标签请用，隔开！"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="文档描述：">
|
|
<el-input
|
|
v-model="formData.ade"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
type="textarea"
|
|
placeholder="对于本次检查发现的问题，望相关责任单位安排专人严格按照时间节点及要求进行整改，整改后及时回复。企管部、综合办进行复查。"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="附件下载：">
|
|
<el-switch v-model="childBorder" />
|
|
</el-form-item>
|
|
<el-form-item label="文档正文：">
|
|
<Editor v-model="editContvalue" style="height: calc(100vh - 124px)"/>
|
|
</el-form-item>
|
|
<el-form-item label="排序：">
|
|
<el-input
|
|
v-model="formData.ddd"
|
|
style="width: 200px"
|
|
placeholder="请输入文档序号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="评论设置：">
|
|
<el-switch v-model="parentBorder" placeholder="启用" />
|
|
</el-form-item>
|
|
<el-form-item label="访问权限：" prop="age">
|
|
<el-radio-group v-model="formData.age">
|
|
<el-radio :label="'公开'">公开</el-radio>
|
|
<el-radio :label="'分厂'">分厂</el-radio>
|
|
<el-radio :label="'工段'">工段</el-radio>
|
|
<el-radio :label="'自定义'">自定义</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm()">确定</el-button>
|
|
<el-button @click="resetForm()">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</template>
|
|
<script lang="ts">
|
|
import { reactive, toRefs, ref, onMounted} from "vue";
|
|
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
|
|
import { ElMessage,UploadProps} from "element-plus";
|
|
import Editor from "@/components/WangEditor/index.vue";
|
|
import "quill/dist/quill.snow.css";
|
|
import type { UploadFile } from 'element-plus'
|
|
interface FormInfo {
|
|
id: string;
|
|
age: string;
|
|
name: string;
|
|
sex: string;
|
|
ccc: string;
|
|
ade: string;
|
|
iop: string;
|
|
ddd: string;
|
|
dialogVis: boolean;
|
|
dialogImageUrl: string;
|
|
}
|
|
const childBorder = ref(false);
|
|
const parentBorder = ref(false);
|
|
const editContvalue = ref("");
|
|
const dialogImageUrl = ref("");
|
|
const dialogVis = ref(false);
|
|
const disabled = ref(false);
|
|
const imageUrl = ref("");
|
|
const handleRemove = (file: UploadFile) => {
|
|
console.log(file);
|
|
};
|
|
const handlePictureCardPreview = (file: UploadFile) => {
|
|
dialogImageUrl.value = file.url!;
|
|
dialogVis.value = true;
|
|
};
|
|
const handleDownload = (file: UploadFile) => {
|
|
console.log(file);
|
|
};
|
|
const nameRules = [
|
|
{ required: true, message: "文章标题不能为空", trigger: "blur"},
|
|
// 名称字段的其他验证规则
|
|
];
|
|
const handleAvatarSuccess: UploadProps["onSuccess"] = (
|
|
response,
|
|
uploadFile
|
|
) => {
|
|
imageUrl.value = URL.createObjectURL(uploadFile.raw!);
|
|
};
|
|
export default {
|
|
components: {
|
|
Editor
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
dialogShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
rowInfo: {
|
|
type: Object as () => FormInfo,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
arrayNum: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
emits: ['image-uploaded', 'update:dialogShow', 'editRow', 'addRow'],
|
|
setup(props, { emit }) {
|
|
const data = reactive({
|
|
dialogFlag: false,
|
|
dialogVis: false,
|
|
dialogImageUrl: "",
|
|
formData: {
|
|
id: props.arrayNum.toString(),
|
|
age: "'公开'",
|
|
name: "",
|
|
sex: "",
|
|
ccc: "",
|
|
ade: "",
|
|
iop: "1",
|
|
ddd: "",
|
|
dialogVis: false, // 初始化为 false
|
|
dialogImageUrl: "", // 初始化为空字符串
|
|
},
|
|
});
|
|
const handleAvatar = (response:any, uploadFile:UploadFile) => {
|
|
if (uploadFile.raw) {
|
|
const imageUrl = URL.createObjectURL(uploadFile.raw);
|
|
// 触发自定义事件，传递图片URL给父组件
|
|
emit('image-uploaded', imageUrl);
|
|
}
|
|
};
|
|
const method = reactive({
|
|
// 关闭弹窗
|
|
handleClose() {
|
|
emit("update:dialogShow", false);
|
|
},
|
|
// 重置
|
|
resetForm() {
|
|
data.formData = Object.assign({}, props.rowInfo);
|
|
},
|
|
// 提交表单内容
|
|
submitForm() {
|
|
method.handleClose();
|
|
if (props.rowInfo.name) {
|
|
// 修改
|
|
const id = props.rowInfo;
|
|
emit("editRow", data.formData);
|
|
} else {
|
|
// 新增
|
|
data.formData["id"] = (props.arrayNum + 1).toString();
|
|
emit("addRow", data.formData);
|
|
}
|
|
|
|
}
|
|
});
|
|
const editorInstance = ref(null);
|
|
onMounted(() => {
|
|
data.formData = Object.assign({}, props.rowInfo);
|
|
});
|
|
const imageUrl = ref("");
|
|
const handlePictureCardPreview = (file: UploadFile) => {};
|
|
const disabled = ref(false);
|
|
const handleRemove = (file: UploadFile) => {};
|
|
const handleDownload = (file: UploadFile) => {};
|
|
return {
|
|
...toRefs(data),
|
|
...method,
|
|
disabled,
|
|
handleRemove,
|
|
handlePictureCardPreview,
|
|
handleDownload,
|
|
editContvalue,
|
|
nameRules,
|
|
parentBorder,
|
|
childBorder,
|
|
imageUrl,
|
|
handleAvatarSuccess,
|
|
editorInstance,
|
|
handleAvatar
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
|
|
.avatar-uploader .avatar {
|
|
display: block;
|
|
width: 178px;
|
|
height: 178px;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.avatar-uploader .el-upload {
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
width: 178px;
|
|
height: 178px;
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
text-align: center;
|
|
}
|
|
.el-dialog{
|
|
width:1200px;
|
|
}
|
|
</style>
|
|
|