gdxz/hospital-admin
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

10.29 ，互医

Browse Source
This commit is contained in:
zoujiandong
2024-10-29 17:24:35 +08:00
parent 561aace7f9
commit 933936bfa0
9 changed files with 1763 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/articleModal.vue
+281
View File
@@ -0,0 +1,281 @@
<template>
<!-- Modal -->
<a-modal v-model:visible="modalVisible" fullscreen :title="title" title-align="start" :footer="false"
@cancel="handleClose">
<div class="titlebox">
<div class="bar"></div>
<div class="name">文章信息</div>
</div>
<a-form :model="modalForm" ref="modalFormRef" :auto-label-width="true" :rules="rules">
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="12">
<a-form-item field="article_title" label="文章标题：">
<a-input v-model="modalForm.article_title" placeholder="请输入文章标题" :style="{ width: '250px' }"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="article_status" label="文章状态：">
<a-select v-model="modalForm.article_status" placeholder="请选择文章状态" :style="{ width: '182px' }">
<a-option :value="1">正常</a-option>
<a-option :value="2">禁用</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="is_top" label="是否置顶：">
<a-select v-model="modalForm.is_top" placeholder="请选择是否置顶" :style="{ width: '182px' }">
<a-option :value="1">是</a-option>
<a-option :value="0">否</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="source_id" label="文章来源：">
<a-select v-model="modalForm.source_id" placeholder="请选择文章来源"
:style="{ width: '200px' }">
<a-option size="large" style="max-width:500px" v-for="item in originList" :key="item.source_id"
:value="item.source_id" :label="item.source_name">
{{ item.source_name }}
</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="article_url" label="文章地址：">
<a-input v-model="modalForm.article_url" placeholder="请输入文章地址" :style="{ width: '250px' }"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="article_image" label="文章图片：">
<a-space size="large">
<a-image fit="cover" width="80" height="80" class="headImg" :src="modalForm.article_image">
</a-image>
</a-space>
<a-upload action="/" :fileList="file ? [file] : []" class="upload" :auto-upload="false"
@change="onChangeFile" accept="image/*" @before-upload="beforeUpload" :show-file-list="false"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item field="article_science_class" label="文章分类：">
<a-select multiple value-key="basic_class_name" v-model="modalForm.article_science_class" placeholder="请选择文章分类"
:style="{ width: '300px' }">
<a-option size="large" style="max-width:500px" v-for="item in classifyList" :key="item.basic_class_id"
:value="item" :label="item.basic_class_name">
{{ item.basic_class_name }}
</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-divider />
</a-form>
<div class="titlebox">
<div class="bar"></div>
<div class="name">操作</div>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="" label="" no-style>
<a-space>
<a-button type="primary" @click="handleSubmit" v-has="'admin:sysArticleList:save'">保存</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-modal>
</template>
<script setup>
import { ref, toRefs, watch, getCurrentInstance } from 'vue';
import { getAllClassifyList, addArticle, editArticle,getAllOriginList } from '@/api/kepu/list';
import { ossSign, ossUpload } from '@/api/oss';
import dayjs from 'dayjs'
const { proxy } = getCurrentInstance();
const file = ref();
const props = defineProps({
// 是否显示
modalVisible: {
type: Boolean,
default: false,
},
id: {
type: String,
default: '',
},
modalForm: {
type: Object,
},
});
const title = ref('');
const emits = defineEmits(['familyVisibleChange', 'freshDetail']);
const { modalVisible, modalForm } = toRefs(props);
const classifyList = ref([]);
const originList = ref([]);
//获取区域列表
const handelAllList = (value) => {
console.log(value);
getAllClassifyList({
basic_class_name: value
}).then((res) => {
const { data, code, message } = res;
if (code == 200) {
classifyList.value = data
}
});
};
const handelOriginAllList = (value) => {
getAllOriginList({
basic_class_name: value
}).then((res) => {
const { data, code, message } = res;
if (code == 200) {
originList.value = data
}
});
};
watch(
() => props.id,
() => {
if (props.id) {
title.value = '编辑文章信息';
} else {
title.value = '修改文章信息';
}
},
{ immediate: true }
);
const rules = {
article_title: [{ required: true, message: '请输入文章标题' }],
article_status: [{ required: true, message: '请选择文章状态' }],
is_top: [{ required: true, message: '请选择是否置顶' }],
article_url: [{ required: true, message: '请输入文章地址' }],
article_image: [{ required: true, message: '请上传文章图片' }],
source_id: [{ required: true, message: '请选择文章来源' }],
article_science_class: [{ type:'array',required: true, message: '请选择文章分类' }],
};
const handleSubmit = () => {
proxy.$refs.modalFormRef.validate(async (valid) => {
let data = null;
let {
article_title,
article_status,
is_top,
article_image,
source_id,
article_url,
article_science_class
} = modalForm.value;
if (!valid) {
if (props.id) {
console.log( article_science_class)
data = await editArticle(props.id, {
article_title,
article_status,
is_top,
article_image,
source_id,
article_url,
article_science_class
});
} else {
data = await addArticle({
article_title,
article_status,
is_top,
article_image,
source_id,
article_url,
article_science_class
});
}
if (data.code == 200) {
props.id
? proxy.$message.success('修改成功')
: proxy.$message.success('添加成功');
emits('freshDetail');
}
handleClose();
emits('freshDetail');
} else {
console.log(valid);
proxy.$message.error('表单校验失败');
//done(false);
}
});
};
const onChangeFile = (fileList) => {
getOssSign(4, fileList[0].file);
}
const beforeUpload = (file, type) => {
return new Promise((resolve, reject) => {
if (file.size >= 10 * 1024 * 1024) {
proxy.$notification.error("图片大小不能超过10M");
reject('cancel')
} else {
resolve(true)
}
});
};
const getOssSign = async (scene, File) => {
const { data, code, message } = await ossSign({
user_type: 4,
scene,
});
if (code == 200) {
let { access_id, dir, policy, signature, host } = data;
//let index = File.lastIndexOf("/");
let filename = File.name;
let time = dayjs().format("YYYYMMDDHHmmss")
let formData = new FormData();
formData.append('OSSAccessKeyId', access_id);
formData.append('policy', policy);
formData.append('signature', signature);
formData.append('key', dir + time + filename);
formData.append('success_action_status', 200);
formData.append('file', File, filename);
ossUpload(host, formData).then((res) => {
console.log(host + "/" + dir + time + filename)
modalForm.value.article_image = host + "/" + dir + time + filename;
proxy.$refs.modalFormRef.validateField(['article_image'],(valid) => {})
});
}
}
// Akiraka 20230210 关闭弹窗
const handleClose = () => {
proxy.$refs.modalFormRef.resetFields();
emits('familyVisibleChange', false);
};
const getData = () => {
handelOriginAllList();
handelAllList();
};
defineExpose({
getData,
});
</script>
<style scoped>
.row {
display: flex;
}
.upload{
margin-left: 10px;
}
</style>
src/components/articleOriginModal.vue
+182
View File
@@ -0,0 +1,182 @@
<template>
<!-- Modal -->
<a-modal v-model:visible="modalVisible" fullscreen :title="title" title-align="start" :footer="false"
@cancel="handleClose">
<div class="titlebox">
<div class="bar"></div>
<div class="name">文章来源信息</div>
</div>
<a-form :model="modalForm" ref="modalFormRef" :auto-label-width="true" :rules="rules">
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="12">
<a-form-item field="source_name" label="来源名称：">
<a-input v-model="modalForm.source_name" placeholder="请输入来源名称" :style="{ width: '250px' }"></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="source_image" label="来源图片：" :validate-trigger="['change', 'blur']">
<a-space size="large">
<a-image fit="cover" width="80" height="80" class="headImg" :src="modalForm.source_image">
</a-image>
</a-space>
<a-upload action="/" :fileList="file ? [file] : []" class="upload" :auto-upload="false"
@change="onChangeFile" accept="image/*" @before-upload="beforeUpload" :show-file-list="false"
/>
<a-input v-model="modalForm.source_image" :style="{width:'320px',opacity:0}" placeholder="Please enter something" allow-clear />
</a-form-item>
</a-col>
</a-row>
<a-divider />
</a-form>
<div class="titlebox">
<div class="bar"></div>
<div class="name">操作</div>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="" label="" no-style>
<a-space>
<a-button type="primary" @click="handleSubmit" v-has="'admin:sysArticleList:save'">保存</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-modal>
</template>
<script setup>
import { ref, toRefs, watch, getCurrentInstance } from 'vue';
import { addArticleOrigin, editArticleOrigin } from '@/api/kepu/list';
import { ossSign, ossUpload } from '@/api/oss';
import dayjs from 'dayjs'
const { proxy } = getCurrentInstance();
const file = ref();
const props = defineProps({
// 是否显示
modalVisible: {
type: Boolean,
default: false,
},
id: {
type: String,
default: '',
},
modalForm: {
type: Object,
},
});
const title = ref('');
const emits = defineEmits(['familyVisibleChange', 'freshDetail']);
const { modalVisible, modalForm } = toRefs(props);
//获取区域列表
watch(
() => props.id,
() => {
if (props.id) {
title.value = '编辑来源图片';
} else {
title.value = '修改来源图片';
}
},
{ immediate: true }
);
const rules = {
source_name: [{ required: true, message: '请输入来源名称', }],
source_image: [{ required: true, message: '请上传来源图片'}],
};
const handleSubmit = () => {
proxy.$refs.modalFormRef.validate(async (valid) => {
let data = null;
let {
source_image,
source_name
} = modalForm.value;
if (!valid) {
if (props.id) {
data = await editArticleOrigin(props.id, {
source_image,
source_name
});
} else {
data = await addArticleOrigin({
source_image,
source_name
});
}
if (data.code == 200) {
props.id
? proxy.$message.success('修改成功')
: proxy.$message.success('添加成功');
emits('freshDetail');
}
handleClose();
emits('freshDetail');
} else {
console.log(valid);
proxy.$message.error('表单校验失败');
//done(false);
}
});
};
const onChangeFile = (fileList) => {
getOssSign(4, fileList[0].file);
}
const beforeUpload = (file, type) => {
return new Promise((resolve, reject) => {
if (file.size >= 10 * 1024 * 1024) {
proxy.$notification.error("图片大小不能超过10M");
reject('cancel')
} else {
resolve(true)
}
});
};
const getOssSign = async (scene, File) => {
const { data, code, message } = await ossSign({
user_type: 4,
scene,
});
if (code == 200) {
let { access_id, dir, policy, signature, host } = data;
//let index = File.lastIndexOf("/");
let filename = File.name;
let time = dayjs().format("YYYYMMDDHHmmss")
let formData = new FormData();
formData.append('OSSAccessKeyId', access_id);
formData.append('policy', policy);
formData.append('signature', signature);
formData.append('key', dir + time + filename);
formData.append('success_action_status', 200);
formData.append('file', File, filename);
ossUpload(host, formData).then((res) => {
console.log(host + "/" + dir + time + filename)
modalForm.value.source_image = host + "/" + dir + time + filename;
proxy.$refs.modalFormRef.validateField(['source_image'],(valid) => {})
});
}
}
// Akiraka 20230210 关闭弹窗
const handleClose = () => {
proxy.$refs.modalFormRef.resetFields();
emits('familyVisibleChange', false);
};
</script>
<style scoped>
.row {
display: flex;
}
.upload{
margin-left: 10px;
}
</style>
src/components/classifyModal.vue
+149
View File
@@ -0,0 +1,149 @@
<template>
<!-- Modal -->
<a-modal
v-model:visible="modalVisible"
fullscreen
:title="title"
title-align="start"
:footer="false"
@cancel="handleClose"
>
<div class="titlebox">
<div class="bar"></div>
<div class="name">分类信息</div>
</div>
<a-form
:model="modalForm"
ref="modalFormRef"
:auto-label-width="true"
:rules="rules"
>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="12">
<a-form-item field="basic_class_name" label="分类名称：">
<a-input
v-model="modalForm.basic_class_name"
placeholder="请输入分类名称"
:style="{ width: '250px' }"
></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="basic_class_sort" label="分类序号：">
<a-input-number
:min="0"
:style="{ width: '180px' }"
v-model="modalForm.basic_class_sort"
placeholder="输入分类序号"
mode="button"
/>
</a-form-item>
</a-col>
</a-row>
<a-divider />
</a-form>
<div class="titlebox">
<div class="bar"></div>
<div class="name">操作</div>
</div>
<a-row :gutter="24" style="margin-top: 35px">
<a-col :span="24">
<a-form-item field="" label="" no-style>
<a-space>
<a-button
type="primary"
@click="handleSubmit"
v-has="'admin:sysClassifyList:save'"
>保存</a-button
>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-modal>
</template>
<script setup>
import { ref, toRefs, watch, getCurrentInstance } from 'vue';
import { addClassify, editClassify } from '@/api/kepu/list';
const { proxy } = getCurrentInstance();
const props = defineProps({
// 是否显示
modalVisible: {
type: Boolean,
default: false,
},
id: {
type: String,
default: '',
},
modalForm: {
type: Object,
},
});
const title = ref('');
const emits = defineEmits(['familyVisibleChange', 'freshDetail']);
const { modalVisible, modalForm } = toRefs(props);
watch(
() => props.id,
() => {
if (props.id) {
title.value = '编辑分类';
} else {
title.value = '添加分类';
}
},
{ immediate: true }
);
const rules = {
basic_class_name: [{ required: true, message: '请输入分类名称' }],
basic_class_sort: [{ required: true, message: '请输入分类序号' }],
};
const handleSubmit = () => {
proxy.$refs.modalFormRef.validate(async (valid) => {
let data = null;
let {
basic_class_name,
basic_class_sort
} = modalForm.value;
if (!valid) {
if (props.id) {
data = await updateClassify(props.id, {
basic_class_name,
basic_class_sort
});
} else {
data = await addClassify({
basic_class_name,
basic_class_sort
});
}
if (data.code == 200) {
props.id
? proxy.$message.success('修改成功')
: proxy.$message.success('添加成功');
emits('freshDetail');
}
handleClose();
emits('freshDetail');
} else {
console.log(valid);
proxy.$message.error('表单校验失败');
//done(false);
}
});
};
// Akiraka 20230210 关闭弹窗
const handleClose = () => {
proxy.$refs.modalFormRef.resetFields();
emits('familyVisibleChange', false);
};
</script>
<style scoped>
.row {
display: flex;
}
</style>