hir_web/src/views/system/notice/components/from.vue

338 lines
9.1 KiB
Vue

<template>
<base-model :config="model_cfg">
<template slot="dialog-body">
<el-form
ref="NoticeForm"
:model="form"
:rules="rules"
label-width="180px"
size="small"
>
<el-form-item
:label="$t('system:notice:label:NoticeLevel')"
prop="NoticeLevelEnum"
>
<el-select v-model="form.NoticeLevelEnum" clearable size="small">
<el-option
v-for="item of $d.NoteLevel"
:key="item.value"
:label="item.label"
:value="item.raw.Code * 1"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:NoticeType')"
prop="NoticeTypeEnum"
>
<el-select v-model="form.NoticeTypeEnum" clearable size="small">
<el-option
v-for="item of $d.NoteType"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:ApplicableProject')"
prop="ApplicableProjectEnum"
>
<el-select
v-model="form.ApplicableProjectEnum"
clearable
size="small"
>
<el-option
v-for="item of $d.TrialType"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:NoticeUserTypeIdList')"
prop="NoticeUserTypeIdList"
>
<el-select
v-model="form.NoticeUserTypeIdList"
multiple
clearable
size="small"
>
<el-option
v-for="item of roleList"
:key="item.Id"
:label="item.UserTypeName"
:value="item.Id"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:NoticeMode')"
prop="NoticeModeEnum"
>
<el-select v-model="form.NoticeModeEnum" clearable size="small">
<el-option
v-for="item of $d.NoticeMode"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:StartDate')"
prop="StartDate"
>
<el-date-picker
v-model="form.StartDate"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
:default-time="'00:00:00'"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item :label="$t('system:notice:label:EndDate')" prop="EndDate">
<el-date-picker
v-model="form.EndDate"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
:default-time="'23:59:59'"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item
v-if="!form.Id"
:label="$t('system:notice:label:IsPush')"
prop="IsPush"
>
<el-switch
v-model="form.IsPush"
:active-value="true"
:inactive-value="false"
/>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:NoticeContent')"
prop="NoticeContent"
>
<el-input
v-model="form.NoticeContent"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item :label="$t('system:notice:label:file')">
<el-upload
class="upload-demo"
action
:before-upload="beforeUpload"
:http-request="handleUploadFile"
:on-preview="handlePreview"
:on-remove="handleRemoveFile"
:show-file-list="true"
:limit="1"
:file-list="fileList"
>
<el-button
size="small"
type="primary"
:disabled="fileList.length > 0"
>{{ $t("common:button:upload") }}</el-button
>
</el-upload>
</el-form-item>
</el-form>
</template>
<template slot="dialog-footer">
<el-button
:disabled="btnLoading"
size="small"
type="primary"
@click="handleCancle"
>{{ $t("common:button:cancel") }}</el-button
>
<el-button
size="small"
type="primary"
:loading="btnLoading"
@click="handleSave"
>{{ $t("common:button:save") }}</el-button
>
</template>
</base-model>
</template>
<script>
import {
addOrUpdateSystemNotice,
uploadSystemNoticeDoc,
} from "@/api/system/notice";
import BaseModel from "@/components/BaseModel";
const formDataDefault = () => {
return {
Id: null,
NoticeLevelEnum: null,
NoticeTypeEnum: null,
NoticeContent: null,
ApplicableProjectEnum: null,
NoticeModeEnum: null,
NoticeStateEnum: 0,
StartDate: null,
EndDate: null,
FileName: null,
Path: null,
IsPush: false,
NoticeUserTypeIdList: [],
};
};
export default {
components: { BaseModel },
props: {
roleList: {
type: Array,
default() {
return [];
},
},
},
dicts: [
"NoticeApplicableTrial",
"NoteLevel",
"NoteType",
"NoticeState",
"NoticeMode",
],
data() {
return {
btnLoading: false,
form: formDataDefault(),
rules: {
NoticeLevelEnum: [
{ required: true, message: "Please specify", trigger: "blur" },
],
NoticeTypeEnum: [
{ required: true, message: "Please specify", trigger: "blur" },
],
NoticeContent: [
{ required: true, message: "Please specify", trigger: "blur" },
],
ApplicableProjectEnum: [
{ required: true, message: "Please specify", trigger: "blur" },
],
NoticeModeEnum: [
{ required: true, message: "Please specify", trigger: "blur" },
],
// NoticeStateEnum: [{ required: true, message: 'Please specify', trigger: 'blur' }],
NoticeUserTypeIdList: [
{ required: true, message: "Please specify", trigger: "blur" },
],
},
fileList: [],
model_cfg: {
visible: false,
showClose: true,
width: "600px",
title: "",
appendToBody: false,
},
};
},
mounted() {},
methods: {
handleRemoveFile() {
this.form.FileName = null;
this.form.Path = null;
this.fileList = [];
},
beforeUpload() {
if (this.fileList.length > 0) {
this.$alert(this.$t("system:notice:msg:message1"));
return;
}
},
handlePreview(row, r2) {
if (row.fullPath) {
window.open(row.fullPath, "_blank");
}
},
async handleUploadFile(param) {
this.loading = true;
var file = await this.fileToBlob(param.file);
const res = await this.OSSclient.put(
`/System/NoticeAttachment/${param.file.name}`,
file
);
this.fileList.push({
name: param.file.name,
path: res.name,
fullPath: res.name,
url: res.name,
});
this.form.Path = res.name;
this.form.FileName = param.file.name;
this.loading = false;
},
openDialog(title, data) {
this.model_cfg.visible = true;
this.model_cfg.title = title;
this.fileList = [];
if (Object.keys(data).length) {
this.form = { ...data };
console.log(this.form);
if (this.form.FileName) {
this.fileList[0] = {
name: this.form.FileName,
path: this.form.Path,
fullPath: this.form.Path,
url: this.form.Path,
};
}
this.$set(
this.form,
"NoticeUserTypeIdList",
this.form.NoticeUserTypeList.map((v) => v.Id)
);
} else {
this.form = formDataDefault();
}
},
handleSave() {
this.$refs.NoticeForm.validate((valid) => {
if (!this.form.Id && this.form.IsPush) {
this.form.NoticeStateEnum = 1;
}
if (valid) {
this.form.StartDate = this.form.StartDate
? this.parseTime(this.form.StartDate)
: null;
this.form.EndDate = this.parseTime(this.form.EndDate)
? this.parseTime(this.form.EndDate)
: null;
this.btnLoading = true;
addOrUpdateSystemNotice(this.form)
.then((res) => {
this.btnLoading = false;
this.$message.success("Saved successfully!");
this.model_cfg.visible = false;
this.$emit("getList");
})
.catch(() => {
this.btnLoading = false;
});
}
});
},
handleCancle() {
this.model_cfg.visible = false;
},
},
};
</script>
<style lang="scss">
.el-upload-list__item .el-icon-close-tip {
display: none !important;
}
</style>