From cf4de0a3f218b79d49b05450ca0fc4527c2fa78e Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期三, 22 二月 2023 17:15:55 +0800
Subject: [PATCH] 修改数据管理弹框按钮样式
---
src/views/Archive/dataApplication.vue | 395 ++++++++++++++++++++++++++++----------------------------
1 files changed, 197 insertions(+), 198 deletions(-)
diff --git a/src/views/Archive/dataApplication.vue b/src/views/Archive/dataApplication.vue
index 3f9b927..c790741 100644
--- a/src/views/Archive/dataApplication.vue
+++ b/src/views/Archive/dataApplication.vue
@@ -1,99 +1,92 @@
<template>
<div class="logLog_box box_div">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('synthesis.synthesis')}`,
`${$t('synthesis.dataApplication')}`,
- ]"></My-bread>
+ ]"
+ ></My-bread>
<el-divider />
- <div class="inquire subpage_Div">
- <el-form
- :inline="true"
- ref="sizeForm"
- :model="sizeForm"
- >
- <el-form-item
- prop="uname"
- :label="$t('operatManage.operationLogObj.username')"
- >
- <el-input
- v-model="sizeForm.uname"
- :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
- />
- </el-form-item>
- <el-form-item
- prop="status"
- :label="$t('operatManage.operationLogObj.status')"
- >
- <el-select
- v-model="sizeForm.status"
- :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
- >
- <el-option
- :label="$t('dataApply.type1')"
- value="-10"
- />
- <el-option
- :label="$t('dataApply.type2')"
- value="-1"
- />
- <el-option
- :label="$t('dataApply.type3')"
- value="0"
- />
- <el-option
- :label="$t('dataApply.type4')"
- value="-9"
- />
- </el-select>
- </el-form-item>
- <el-form-item
- prop="start"
- :label="$t('operatManage.operationLogObj.startTime')"
- >
- <el-date-picker
- format="yyyy-MM-dd HH:mm:ss"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="sizeForm.start"
- style="width: 100%"
- type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- ></el-date-picker>
- </el-form-item>
- <el-form-item
- prop="end"
- :label="$t('operatManage.operationLogObj.endTime')"
- >
- <el-date-picker
- format="yyyy-MM-dd HH:mm:ss"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="sizeForm.end"
- style="width: 100%"
- type="datetime"
- :placeholder="$t('operatManage.operationLogObj.optionDate')"
- >
- </el-date-picker>
- </el-form-item>
-
- <el-form-item>
- <el-button
- @click="onSubmit"
- icon="el-icon-search"
- style="background: #409eff; border: 1px solid #409eff; color: white"
- >{{ $t("operatManage.operationLogObj.inquire") }}</el-button>
- <el-button
- @click="resAllTable"
- icon="el-icon-delete"
- type="info"
- >{{ $t("operatManage.operationLogObj.empty") }}</el-button>
- </el-form-item>
+ <div class="inquire subpage_Div" ref="container">
+ <el-form :inline="true" ref="sizeForm" :model="sizeForm">
+ <div class="flex_box">
+ <div style="margin-right: auto">
+ <el-form-item
+ prop="uname"
+ :label="$t('operatManage.operationLogObj.username')"
+ >
+ <el-input
+ v-model="sizeForm.uname"
+ :placeholder="$t('operatManage.operationLogObj.pleaseInput')"
+ />
+ </el-form-item>
+ <el-form-item
+ prop="status"
+ :label="$t('operatManage.operationLogObj.status')"
+ >
+ <el-select
+ v-model="sizeForm.status"
+ :placeholder="$t('operatManage.operationLogObj.pleaseSelect')"
+ >
+ <el-option :label="$t('dataApply.type1')" value="-10" />
+ <el-option :label="$t('dataApply.type2')" value="-1" />
+ <el-option :label="$t('dataApply.type3')" value="0" />
+ <el-option :label="$t('dataApply.type4')" value="-9" />
+ </el-select>
+ </el-form-item>
+ <el-form-item
+ prop="start"
+ :label="$t('operatManage.operationLogObj.startTime')"
+ >
+ <el-date-picker
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="sizeForm.start"
+ style="width: 100%"
+ type="datetime"
+ :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ ></el-date-picker>
+ </el-form-item>
+ <el-form-item
+ prop="end"
+ :label="$t('operatManage.operationLogObj.endTime')"
+ >
+ <el-date-picker
+ format="yyyy-MM-dd HH:mm:ss"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="sizeForm.end"
+ style="width: 100%"
+ type="datetime"
+ :placeholder="$t('operatManage.operationLogObj.optionDate')"
+ >
+ </el-date-picker>
+ </el-form-item>
+ </div>
+ <div>
+ <el-form-item>
+ <el-button
+ @click="onSubmit"
+ icon="el-icon-search"
+ style="
+ background: #409eff;
+ border: 1px solid #409eff;
+ color: white;
+ "
+ >{{ $t("operatManage.operationLogObj.inquire") }}</el-button
+ >
+ <el-button
+ @click="resAllTable"
+ icon="el-icon-delete"
+ type="info"
+ >{{ $t("operatManage.operationLogObj.empty") }}</el-button
+ >
+ </el-form-item>
+ </div>
+ </div>
</el-form>
</div>
- <div class="table_box subpage_Div">
- <el-table
- :data="tableData"
- style="width: 100%"
- >
-
+ <div class="table_box subpage_Div" :style="styleVar">
+ <el-table :data="tableData" style="width: 100%" height="calc(100% - 57px)">
<el-table-column
align="center"
type="index"
@@ -125,40 +118,36 @@
:formatter="formatStatus"
/>
- <el-table-column
- min-width="150"
- :label="$t('common.operate')"
- >
+ <el-table-column min-width="150" :label="$t('common.operate')">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
@click="handleApplyCancel(scope.$index, scope.row)"
- v-if="matchState(scope,/[]/)"
+ v-if="matchState(scope, /[]/)"
plain
- >{{$t('dataApply.ApplicationCancel')}}</el-button>
+ >{{ $t("dataApply.ApplicationCancel") }}</el-button
+ >
<el-button
type="warning"
size="mini"
@click="handleReApply(scope.$index, scope.row)"
- v-if="matchState1(scope,/[]/)"
+ v-if="matchState1(scope, /[]/)"
plain
- >{{$t('dataApply.ReApply')}}</el-button>
+ >{{ $t("dataApply.ReApply") }}</el-button
+ >
<el-button
type="info"
size="mini"
plain
@click="handlDetails(scope.$index, scope.row)"
- >{{$t('dataApply.details')}}</el-button>
-
+ >{{ $t("dataApply.details") }}</el-button
+ >
</template>
</el-table-column>
</el-table>
- <div
-
- class="pagination_box"
- >
+ <div class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -178,50 +167,30 @@
:before-close="handleClose"
>
<div>
-
- <el-form
- :inline="true"
- :model="detailsFrom"
- class="demo-form-inline"
- >
+ <el-form :inline="true" :model="detailsFrom" class="demo-form-inline">
<el-form-item label="琛ㄥ悕锛�">
- <div class="statusLabel">{{detailsFrom.tabs}}</div>
- </el-form-item><br />
+ <div class="statusLabel">{{ detailsFrom.tabs }}</div> </el-form-item
+ ><br />
<el-form-item label="鐢宠浜猴細">
- <div class="statusLabel">{{detailsFrom.uname}}</div>
+ <div class="statusLabel">{{ detailsFrom.uname }}</div>
</el-form-item>
<el-form-item label="鐢宠鏃堕棿锛�">
- <div class="statusLabel">{{detailsFrom.time}}</div>
+ <div class="statusLabel">{{ detailsFrom.time }}</div>
</el-form-item>
<el-form-item label="鐘舵�侊細">
- <div class="statusLabel">{{detailsFrom.status}}</div>
+ <div class="statusLabel">{{ detailsFrom.status }}</div>
</el-form-item>
</el-form>
- <el-table
- :data="detailsFrom.tableData"
- style="width: 100%"
- >
+ <el-table :data="detailsFrom.tableData" style="width: 100%">
<el-table-column
align="center"
type="index"
:label="$t('operatManage.ELM.index')"
width="70px"
/>
- <el-table-column
- align="center"
- prop="depName"
- label="鍗曚綅"
- />
- <el-table-column
- align="center"
- prop="uname"
- label="瀹℃牳浜�"
- />
- <el-table-column
- align="center"
- prop="uname"
- label="鎻忚堪"
- >
+ <el-table-column align="center" prop="depName" label="鍗曚綅" />
+ <el-table-column align="center" prop="uname" label="瀹℃牳浜�" />
+ <el-table-column align="center" prop="uname" label="鎻忚堪">
<template slot-scope="scope">
<el-input
type="textarea"
@@ -232,7 +201,6 @@
>
</el-input>
</template>
-
</el-table-column>
<el-table-column
align="center"
@@ -240,34 +208,30 @@
label="鐘舵��"
:formatter="formatStatus1"
/>
- <el-table-column
- min-width="150"
- :label="$t('common.operate')"
- >
+ <el-table-column min-width="150" :label="$t('common.operate')">
<template slot-scope="scope">
- <div v-if="matchState3(scope,/[]/)">
+ <div v-if="matchState3(scope, /[]/)">
<el-button
type="danger"
size="mini"
@click="handleApplyRepulse(scope.$index, scope.row)"
plain
- >鎵撳洖</el-button>
+ >鎵撳洖</el-button
+ >
<el-button
@click="handleApplyAdopt(scope.$index, scope.row)"
type="success"
size="mini"
plain
- >閫氳繃</el-button>
+ >閫氳繃</el-button
+ >
</div>
- <div v-if="!matchState3(scope,/[]/)">- -</div>
-
+ <div v-if="!matchState3(scope, /[]/)">- -</div>
</template>
-
</el-table-column>
</el-table>
</div>
-
</el-dialog>
</div>
</template>
@@ -280,7 +244,7 @@
apply_updateForDiscard,
apply_updateForSubmit,
apply_updateForReject,
- apply_updateForResubmit
+ apply_updateForResubmit,
} from "../../api/api";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
@@ -291,7 +255,7 @@
data() {
return {
detailsFrom: {
- tableData:[],
+ tableData: [],
},
dialogDetailsVisible: false,
sizeForm: {
@@ -307,23 +271,48 @@
start: null,
end: null,
uname: null,
- status: null
+ status: null,
},
count: 0,
detailsId: null,
+ tableHeight: 0,
+ timer: 0,
+ styleVar: {
+ height: "calc(100% - 109px)",
+ },
};
},
+ beforeDestroy() {
+ this.timer && clearTimeout(this.timer);
+ window.removeEventListener("resize", this.onResize);
+ },
+ mounted() {
+ window.addEventListener("resize", this.onResize);
+ this.calHeight();
+ },
methods: {
+ onResize() {
+ this.timer && clearTimeout(this.timer);
+ this.timer = setTimeout(() => {
+ this.calHeight();
+ }, 500);
+ },
+ calHeight() {
+ this.$nextTick(() => {
+ const rect = this.$refs.container.getBoundingClientRect();
+ this.tableHeight = `${rect.height + 97}px`;
+ this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
+ });
+ },
async handleApplyRepulse(index, row) {
const data = await apply_updateForReject({ flowId: row.id });
if (data.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
-
+
this.showRestData();
},
async handleApplyAdopt(index, row) {
-
const data = await apply_updateForSubmit({ flowId: row.id });
if (data.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触");
@@ -332,9 +321,8 @@
},
async showRestData() {
const data1 = await apply_selectFlows({
- applyid:
- this.detailsId
- })
+ applyid: this.detailsId,
+ });
if (data1.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
@@ -359,9 +347,8 @@
this.getAllData();
},
async handlDetails(index, row) {
-
this.detailsId = row.id;
- const data = await apply_selectFlows({ applyid: row.id })
+ const data = await apply_selectFlows({ applyid: row.id });
if (data.code != 200) {
return this.$message.error("鍒楄〃璋冪敤澶辫触");
}
@@ -372,36 +359,43 @@
this.detailsFrom.status = this.statusFormat(row.status);
this.detailsFrom.statued = row.status;
this.dialogDetailsVisible = true;
-
},
- matchState(state = '', reg) {
+ matchState(state = "", reg) {
var row = state.row;
- if (row.status >= -1 && row.status <= 9 && this.$store.state.unid == row.userid) {
- return true
+ if (
+ row.status >= -1 &&
+ row.status <= 9 &&
+ this.$store.state.unid == row.userid
+ ) {
+ return true;
}
- return false
+ return false;
},
- matchState1(state = '', reg) {
-
+ matchState1(state = "", reg) {
var row = state.row;
if (row.status == -1 && this.$store.state.unid == row.userid) {
- return true
+ return true;
}
- return false
+ return false;
},
- matchState2(state = '', reg) {
+ matchState2(state = "", reg) {
var row = state.row;
if (row.status != -10 && this.$store.state.unid == row.userid) {
- return true
+ return true;
}
- return false
+ return false;
},
- matchState3(state = '', reg) {
+ matchState3(state = "", reg) {
var row = state.row;
- if (row.status == 0 && (this.detailsFrom.statued > -10 && this.detailsFrom.statued < 10) && this.$store.state.unid == row.userid) {
- return true
+ if (
+ row.status == 0 &&
+ this.detailsFrom.statued > -10 &&
+ this.detailsFrom.statued < 10 &&
+ this.$store.state.unid == row.userid
+ ) {
+ return true;
}
- return false
+ return false;
},
add0(m) {
return m < 10 ? "0" + m : m;
@@ -417,7 +411,11 @@
var mm = time.getMinutes();
var s = time.getSeconds();
return (
- y + "-" + this.add0(m) + "-" + this.add0(d) +
+ y +
+ "-" +
+ this.add0(m) +
+ "-" +
+ this.add0(d) +
" " +
this.add0(h) +
":" +
@@ -442,15 +440,14 @@
return this.statusFormat(data);
},
statusFormat(res) {
-
if (res >= 0 && res <= 9) {
- return "瀹℃牳涓�"
+ return "瀹℃牳涓�";
} else if (res == -10) {
- return "浣滃簾"
+ return "浣滃簾";
} else if (res == -1) {
- return "鎵撳洖"
- }else if (res == 10) {
- return "閫氳繃"
+ return "鎵撳洖";
+ } else if (res == 10) {
+ return "閫氳繃";
}
},
formatStatus1(row, column) {
@@ -459,13 +456,14 @@
return data;
}
return this.statusFormat1(data);
- }, statusFormat1(res) {
+ },
+ statusFormat1(res) {
if (res == 1) {
- return "閫氳繃"
+ return "閫氳繃";
} else if (res == 0) {
- return "寰呭鏍�"
+ return "寰呭鏍�";
} else if (res == -1) {
- return "鎵撳洖"
+ return "鎵撳洖";
}
},
resAllTable() {
@@ -475,21 +473,21 @@
start: null,
end: null,
uname: null,
- type: null
- }
+ type: null,
+ };
this.sizeForm = {
start: null,
end: null,
uname: null,
status: null,
- }
+ };
this.getAllData();
},
onSubmit() {
this.listData.end = this.sizeForm.end;
this.listData.start = this.sizeForm.start;
this.listData.status = this.sizeForm.status;
- this.listData.uname = this.sizeForm.uname
+ this.listData.uname = this.sizeForm.uname;
this.getAllData();
},
@@ -510,7 +508,7 @@
this.tableData = data.result;
this.count = data.count;
- }
+ },
},
created() {
this.getAllData();
@@ -520,24 +518,25 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.logLog_box {
- width: 98%;
+ width: 100%;
- height: 95%;
+ height: 100%;
padding: 1%;
+ box-sizing: border-box;
.el-input {
width: 300px;
}
.inquire {
- overflow: auto;
- padding: 10px;
- margin-top: 20px;
+ padding: 8px;
+
+ margin-top: 20px;
border-radius: 5px;
margin-bottom: 20px;
.el-form-item {
- margin: 7px;
+ margin: 5px;
}
}
.statusLabel {
@@ -545,11 +544,11 @@
font-size: 14px;
}
.table_box {
- overflow: auto;
- height: 70%;
- padding: 10px;
- height: auto;
- border-radius: 5px;
+ // overflow: auto;
+ // height: 70%;
+ // padding: 10px;
+ // height: auto;
+ // border-radius: 5px;
}
.text-center {
text-align: center;
--
Gitblit v1.9.3