通知公告样式修改

src/views/setting/notification/announcement/index.vue

@@ -1,40 +1,50 @@
 <template>
-	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-		:operationColumnWidth="200" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
-		:column-parsing="columnParsing" :operation="operation" :exportList="exportList">
-		<div slot="moreSearch">
-			<el-radio-group v-model="status" size="mini" @change="changeType">
-				<el-radio-button label="">全部</el-radio-button>
-				<el-radio-button label="NO">未发布</el-radio-button>
-				<el-radio-button label="YES">已发布</el-radio-button>
-			</el-radio-group>
-			<br><br>
-		</div>
-		<el-dialog title="" width="800px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
-			:show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-			<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-				<zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
-					:form-data="formData" :form-items="formItems">
-				</zj-form-module>
-			</zj-form-container>
-			<div slot="footer" class="dialog-footer">
-				<el-button size="mini" @click="formCancel">取 消</el-button>
-				<el-button v-if="formDialogType < 2" size="mini" type="primary" @click="formConfirm('NO')">保存</el-button>
-				<el-button v-if="formDialogType < 2" size="mini" type="primary" @click="formConfirm('YES')">发布</el-button>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div :style="{
+				width: '100%',
+				height: activeKey == 'list' ? '100%' : '0px',
+				overflow: 'hidden'
+			}">
+				<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+					:operationColumnWidth="200" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
+					:column-parsing="columnParsing" :operation="operation" :exportList="exportList">
+					<div slot="moreSearch">
+						<el-radio-group v-model="status" size="mini" @change="changeType">
+							<el-radio-button label="">全部</el-radio-button>
+							<el-radio-button label="NO">未发布</el-radio-button>
+							<el-radio-button label="YES">已发布</el-radio-button>
+						</el-radio-group>
+						<br><br>
+					</div>
+				</template-page>
 			</div>
-		</el-dialog>
-		<el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog2"
-			:show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
-			<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-				<zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
-					:form-data="formData" :form-items="formItems2">
-				</zj-form-module>
-			</zj-form-container>
-			<div slot="footer" class="dialog-footer">
-				<el-button size="mini" @click="formCancel">取 消</el-button>
+			<div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+					<zj-form-module :title="data.label" label-width="100px" :showPackUp="false" :form-data="formData"
+						:form-items="formItems">
+					</zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+					<el-button size="mini" @click="data.removeTab()">取 消</el-button>
+					<el-button v-if="formDialogType < 2" size="mini" type="primary"
+						@click="formConfirm('NO', data.removeTab)">保存</el-button>
+					<el-button v-if="formDialogType < 2" size="mini" type="primary"
+						@click="formConfirm('YES', data.removeTab)">发布</el-button>
+				</div>
 			</div>
-		</el-dialog>
-	</template-page>
+			<div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
+				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
+					<zj-form-module :title="data.label" label-width="100px" :showPackUp="false" :form-data="formData"
+						:form-items="formItems2">
+					</zj-form-module>
+				</zj-form-container>
+				<div slot="footer" class="dialog-footer">
+					<el-button size="mini" @click="data.removeTab()">取 消</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -75,9 +85,6 @@ export default {
 			recordSelected: [],
 			/** 表单变量 */
 			formDialogType: 0,
-			formDialogTitles: ["新增", "编辑", "详情"],
-			formDialog: false,
-			formDialog2: false,
 			formData: {
 				type: "A",
 				title: "",
@@ -320,33 +327,58 @@ export default {
 		operation(h, { row, index, column }) {
 			return (<div class='operation-btns'>
 				{row.status == "NO" ? <el-button type="text" onClick={() => {
-					getNoticeDetail({
-						noticeId: row.noticeId
-					}).then(res => {
-						Object.assign(this.formData, res.data, {
-							files: res.data.files ? res.data.files.map(item => ({
-								...item,
-								size: item.fileSize,
-								type: item.fileType,
-							})) : []
-						})
-						this.formDialogType = 1
-						this.openForm()
+					this.$refs.tabPage.addTab({
+						activeKey: "edit",
+						key: "edit",
+						label: "编辑",
+						triggerEvent: () => {
+							this.formCancel()
+							this.$nextTick(() => {
+								getNoticeDetail({
+									noticeId: row.noticeId
+								}).then(res => {
+									Object.assign(this.formData, res.data, {
+										files: res.data.files ? res.data.files.map(item => ({
+											...item,
+											size: item.fileSize,
+											type: item.fileType,
+										})) : []
+									})
+									this.formDialogType = 1
+									this.openForm()
+								})
+							})
+						},
+						closeEvent: () => {
+						}
 					})
 				}}>编辑</el-button> : null}
 				<el-button type="text" onClick={() => {
-					getNoticeDetail({
-						noticeId: row.noticeId
-					}).then(res => {
-						Object.assign(this.formData, res.data, {
-							files: res.data.files ? res.data.files.map(item => ({
-								...item,
-								size: item.fileSize,
-								type: item.fileType,
-							})) : []
-						})
-						this.formDialogType = 2
-						this.openForm('formDialog2')
+
+					this.$refs.tabPage.addTab({
+						activeKey: "detail",
+						key: "detail",
+						label: "查看",
+						triggerEvent: () => {
+							this.formCancel()
+							this.$nextTick(() => {
+								getNoticeDetail({
+									noticeId: row.noticeId
+								}).then(res => {
+									Object.assign(this.formData, res.data, {
+										files: res.data.files ? res.data.files.map(item => ({
+											...item,
+											size: item.fileSize,
+											type: item.fileType,
+										})) : []
+									})
+									this.formDialogType = 2
+									this.openForm()
+								})
+							})
+						},
+						closeEvent: () => {
+						}
 					})
 				}}>查看</el-button>
 				{row.status == "NO" ? <el-popconfirm
@@ -368,31 +400,38 @@ export default {
 			</div>)
 		},
 		addData() {
-			this.formDialogType = 0
-			this.openForm()
+			this.$refs.tabPage.addTab({
+				activeKey: "add",
+				key: "add",
+				label: "新增",
+				triggerEvent: () => {
+					this.formCancel()
+					this.$nextTick(() => {
+						this.formDialogType = 0
+						this.openForm()
+					})
+				},
+				closeEvent: () => {
+				}
+			})
 		},
-		openForm(key = 'formDialog') {
+		openForm() {
 			if (JSON.parse(localStorage.getItem("greemall_user")).type == 2) {
 				getListaa({ pageNum: 1, pageSize: -1, type: 1 }).then((res) => {
 					this.websitList = res.data.records
-					this[key] = true;
 				})
 			} else {
 				getMemberList({ "pageNum": 1, "pageSize": -1, type: "WORKER" }).then(res => {
-					console.log(res.data.records)
 					this.workerList = res.data.records
-					this[key] = true;
 				})
 			}
 		},
 		formCancel() {
-			this.$refs.formRef.$refs.inlineForm.clearValidate()
+			this.$refs?.formRef?.$refs?.inlineForm?.clearValidate()
 			this.$data.formData = this.$options.data().formData
-			this.formDialog = false
-			this.formDialog2 = false
 			this.websitList = []
 		},
-		formConfirm(status) {
+		formConfirm(status, removeTab) {
 			this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
 				if (valid) {
 					[noticeAdd, noticeUpdate][this.formDialogType]({
@@ -408,7 +447,7 @@ export default {
 							type: 'success',
 							message: status == "YES" ? '发送成功!' : '保存成功!'
 						})
-						this.formCancel()
+						removeTab('list')
 						this.$refs.pageRef.refreshList()
 					})
 				}