hir_web/src/views/system/notice/index.vue

495 lines
14 KiB
Vue

<template>
<div class="role">
<div ref="leftContainer" class="left">
<el-form :inline="true">
<el-form-item
:label="$t('system:notice:label:NoticeLevel')"
prop="NoticeLevelEnum"
>
<el-select
v-model="searchData.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="searchData.NoticeTypeEnum" 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:ApplicableProject')"
prop="ApplicableProjectEnum"
>
<el-select
v-model="searchData.ApplicableProjectEnum"
clearable
size="small"
>
<el-option
v-for="item of $d.NoticeApplicableTrial"
:key="item.value"
: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="searchData.NoticeUserTypeIdList"
multiple
clearable
size="small"
>
<el-option
v-for="item of $d.UserType"
:key="item.Id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('system:notice:label:NoticeMode')"
prop="NoticeModeEnum"
>
<el-select v-model="searchData.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>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="getList"
>{{ $t("common:button:search") }}</el-button
>
<el-button
v-hasPermi="['system:notice:add']"
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>{{ $t("common:button:add") }}</el-button
>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
v-adaptive="{ bottomOffset: 45 }"
height="100"
:data="list"
class="table"
>
<el-table-column type="index" width="50" />
<el-table-column
:label="$t('system:notice:table:NoticeLevel')"
prop="NoticeLevelEnum"
min-width="120"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
$d.NoteLevel.find((v) => {
return v.raw.Code * 1 === scope.row.NoticeLevelEnum;
})
? $d.NoteLevel.find((v) => {
return v.raw.Code * 1 === scope.row.NoticeLevelEnum;
}).label
: ""
}}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:NoticeType')"
prop="NoticeTypeEnum"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
$d.NoteType.find((v) => {
return v.raw.Code * 1 === scope.row.NoticeTypeEnum;
})
? $d.NoteType.find((v) => {
return v.raw.Code * 1 === scope.row.NoticeTypeEnum;
}).label
: ""
}}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:NoticeContent')"
prop="NoticeContent"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.NoticeContent }}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:NoticeState')"
prop="NoticeStateEnum"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
<el-tag
:type="
scope.row.ActualNoticeStateEnum === 0
? 'info'
: scope.row.ActualNoticeStateEnum === 1
? 'success'
: 'danger'
"
>
{{
$d.NoticeState.find((v) => {
return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum;
})
? $d.NoticeState.find((v) => {
return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum;
}).label
: ""
}}
</el-tag>
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:ApplicableProject')"
prop="ApplicableProjectEnum"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
$d.NoticeApplicableTrial.find((v) => {
return v.raw.Code * 1 === scope.row.ApplicableProjectEnum;
})
? $d.NoticeApplicableTrial.find((v) => {
return v.raw.Code * 1 === scope.row.ApplicableProjectEnum;
}).label
: ""
}}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:NoticeUserTypeList')"
prop="NoticeUserTypeList"
min-width="80"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
scope.row.NoticeUserTypeList.map(
(v) => v.UserTypeShortName
).toString()
}}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:NoticeMode')"
prop="NoticeModeEnum"
min-width="100"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
dict.type.NoticeMode.find((v) => {
return v.raw.Code * 1 === scope.row.NoticeModeEnum;
})
? $d.NoticeMode.find((v) => {
return v.raw.Code * 1 === scope.row.NoticeModeEnum;
}).label
: ""
}}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:StartDate')"
prop="StartDate"
min-width="240"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.StartDate }}-{{ scope.row.EndDate }}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:PublishUserName')"
prop="PublishUserName"
min-width="100"
show-overflow-tooltip
/>
<el-table-column
:label="$t('system:notice:table:PublishedTime')"
prop="PublishedTime"
min-width="160"
show-overflow-tooltip
/>
<el-table-column
:label="$t('system:notice:table:UpdateTime')"
prop="UpdateTime"
min-width="160"
show-overflow-tooltip
>
<template slot-scope="scope">
{{
scope.row.StartDate ? scope.row.StartDate : scope.row.CreateTime
}}
</template>
</el-table-column>
<el-table-column
:label="$t('system:notice:table:FileName')"
fixed="right"
prop="FileName"
min-width="120"
show-overflow-tooltip
>
<template slot-scope="scope">
<a
:href="OSSclientConfig.basePath + scope.row.FullFilePath"
target="_blank"
style="color: #428bca"
>{{ scope.row.FileName }}</a
>
</template>
</el-table-column>
<el-table-column
:label="$t('common:action:action')"
fixed="right"
prop="UserTypeShortName"
min-width="200"
show-overflow-tooltip
v-if="
hasPermi(['system:notice:edit']) ||
hasPermi(['system:notice:publish']) ||
hasPermi(['system:notice:back'])
"
>
<template slot-scope="scope">
<el-button
v-hasPermi="['system:notice:edit']"
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
>{{ $t("common:action:edit") }}</el-button
>
<el-button
v-hasPermi="['system:notice:publish']"
v-if="scope.row.NoticeStateEnum === 0"
size="mini"
type="text"
icon="el-icon-s-promotion"
@click="handlePush(scope.row)"
>{{ $t("common:action:push") }}</el-button
>
<el-button
v-hasPermi="['system:notice:back']"
v-if="scope.row.NoticeStateEnum === 1"
size="mini"
type="text"
icon="el-icon-s-release"
@click="handleGet(scope.row)"
>{{ $t("common:action:pull") }}</el-button
>
</template>
</el-table-column>
</el-table>
<div class="pagination" style="text-align: right; margin-top: 5px">
<pagination
:total="total"
:page.sync="searchData.PageIndex"
:limit.sync="searchData.PageSize"
@pagination="getList"
/>
</div>
</div>
<notice-form ref="NoticeForm" :role-list="roleList" @getList="getList" />
</div>
</template>
<script>
import {
getSystemNoticeList,
addOrUpdateSystemNotice,
} from "@/api/system/notice";
import { getUserTypeRoleList } from "@/api/admin";
import NoticeForm from "./components/from";
import Pagination from "@/components/Pagination";
const searchDataDefault = () => {
return {
Asc: true,
SortField: "",
NoticeContent: null,
FileName: null,
NoticeTypeEnum: null,
NoticeLevelEnum: null,
ApplicableProjectEnum: null,
NoticeModeEnum: null,
NoticeStateEnum: null,
PageIndex: 1,
PageSize: 20,
};
};
export default {
components: { NoticeForm, Pagination },
dicts: [
"NoticeApplicableTrial",
"NoteLevel",
"NoteType",
"NoticeState",
"NoticeMode",
],
data() {
return {
list: [],
total: 0,
loading: false,
treeData: [],
defaultProps: {
label: "MenuName",
children: "Children",
},
userList: [],
roleList: [],
// 查询参数
searchData: searchDataDefault(),
dialogVisible: false,
editRow: {},
expandedKeys: [],
treeLoading: false,
funcListLoading: false,
funcList: [],
};
},
mounted() {
this.getUserTypeRoleList();
this.getList();
},
methods: {
handlePush(row) {
this.loading = true;
var params = { ...row };
params.NoticeUserTypeIdList = params.NoticeUserTypeList.map((v) => v.Id);
params.NoticeStateEnum = 1;
addOrUpdateSystemNotice(params)
.then((res) => {
this.loading = false;
this.$message.success("发布成功");
this.getList();
})
.catch(() => {
this.loading = false;
});
},
handleGet(row) {
this.loading = true;
var params = { ...row };
params.NoticeUserTypeIdList = params.NoticeUserTypeList.map((v) => v.Id);
params.NoticeStateEnum = 0;
addOrUpdateSystemNotice(params)
.then((res) => {
this.loading = false;
this.$message.success("撤回成功");
this.getList();
})
.catch(() => {
this.loading = false;
});
},
handleEdit(row) {
this.$nextTick(() => {
this.$refs["NoticeForm"].openDialog(this.$t("common:button:edit"), row);
});
},
handleAdd() {
this.$nextTick(() => {
this.$refs["NoticeForm"].openDialog(this.$t("common:button:add"), {});
});
},
getUserTypeRoleList() {
getUserTypeRoleList({})
.then((res) => {
this.roleList = res.Result;
})
.catch(() => {});
},
getList() {
this.loading = true;
getSystemNoticeList(this.searchData)
.then((res) => {
this.loading = false;
this.list = res.Result.CurrentPageData;
this.total = res.Result.TotalCount;
})
.catch(() => {
this.loading = false;
});
},
},
};
</script>
<style lang="scss">
.role {
height: 100%;
box-sizing: border-box;
display: flex;
padding: 10px;
border-radius: 5px;
.left {
display: flex;
flex-direction: column;
width: 0;
flex-grow: 4;
// border-right: 1px solid #ccc;
.filter-container {
display: flex;
align-items: center;
margin: 5px;
}
.data-table {
flex: 1;
padding: 5px 0px;
}
.pagination-container {
text-align: right;
}
}
.right {
width: 0;
flex-grow: 6;
overflow-y: auto;
border-right: 1px solid #ccc;
}
.selected-row {
background-color: cadetblue;
}
}
</style>