// HTML 部分
<style type="text/css" scoped>
[v-cloak] {
display: none
}
.page-main {
height: 100%;
background-color: #ffffff;
}
.page-main .el-main {
padding: 5px 10px 10px 10px;
}
.page-main .el-header {
height: auto !important;
padding: 5px 10px 0 10px;
}
.page-main .el-footer {
padding: 10px;
text-align: right
}
.el-header .el-row {
padding-top: 5px;
}
.el-header .query-params_hide {
height: 0;
}
/*搜索条件每行对应 height 45px*/
.el-header .query-params_show {
min-height: 90px;
}
.el-header .el-dropdown__caret-button {
height: 32px;
}
.form-edit .el-dialog__header {
padding: 5px;
}
.form-edit .el-form-item__content,
.form-edit .el-date-editor.el-input,
.form-edit .el-select {
width: 200px;
}
.form-edit .el-form-item label {
font-weight: 500;
}
.form-edit .el-tabs__content {
height: calc(100% - 40px);
overflow: auto;
}
.form-edit .el-table__fixed-body-wrapper {
top: 37px !important;
}
.form-edit .el-dialog__footer {
padding-bottom: 10px;
}
.item-select .el-dialog__header {
padding: 1px 20px;
background-color: rgba(0,0,0,.1);
}
.item-select .el-dialog__body {
padding: 0;
}
.cell .el-checkbox {
margin: 0;
}
span[class='el-tooltip el-icon-setting'], span[class='el-tooltip el-icon-setting focusing'] {
font-size: 25px;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
cursor: pointer;
color: #409EFF;
}
.el-table__fixed, .el-table__fixed-right {
height: auto !important;
bottom: 11px;
}
#orderTemp {
height: 100%;
width: 100%;
}
/*行颜色*/
.el-table .cutoff-row {
background: #ffd9b3;
}
.el-table .enabled-row {
background: #f6dbdb;
}
.normalFont {
color: #606266;
font-weight: 700;
}
.dangerFont {
color: red;
font-weight: 700;
}
.warningFont {
color: #fa7d02;
font-weight: 700;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
.el-tabs__header {
margin: 0 0 5px !important;
}
a {
color: #337ab7;
text-decoration: none;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
</style>
<div v-cloak id="orderTemp">
<el-container class="page-main">
<el-header height="auto">
<el-tabs v-model="selectContractTypeTabsValue" @@tab-click="ContractTypeClick">
<el-tab-pane v-for="(item, index) in contractTabs" :key="item.name" :label="item.title" :name="item.name">
</el-tab-pane>
</el-tabs>
<div v-show="toolQuery.queryParamsShow" style="transition: all .3s; overflow: hidden">
<!-- 搜索条件 -->
<el-form size="mini" class="search-form-inline" :model="toolQuery.queryParams" label-width="80px" ref="toolQuery">
<el-row>
@*这是需要的搜索条件*@
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="申请人" style="margin-bottom: 0">
<el-input v-model="toolQuery.queryParams.F_Receptor" size="mini" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="申请单号" style="margin-bottom: 0">
<el-input v-model="toolQuery.queryParams.F_OrderNo" size="mini" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="标题" style="margin-bottom: 0">
<el-input v-model="toolQuery.queryParams.F_OrderName" size="mini" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" :offset="16" style="text-align:right">
<el-button type="primary" size="small" icon="el-icon-search" @@click="searchData">搜索</el-button>
<el-button size="mini" @@click="resetForm()">重置</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div style="display: flex; justify-content: space-between;margin: 5px 0">
<!-- 操作按钮组 -->
<el-button-group UtSoft-authorize="yes">
<el-button id="refresh" size="small" plain @@click="ReFresh">刷新</el-button>
</el-button-group>
<el-button type="text" size="small" :icon="{'el-icon-search':!toolQuery.queryParamsShow,'el-icon-edit-outline':toolQuery.queryParamsShow }" @@click="toolQuery.queryParamsShow=!toolQuery.queryParamsShow">{{ toolQuery.queryParamsShow?'隐藏':'显示' }}条件搜索</el-button>
</div>
</el-header>
<el-main class="main-table_container" :style="{height: toolQuery.queryParamsShow?'calc(100% - 130px)':'calc(100% - 80px)'}">
<input type="hidden" id="contract_Review_StatusCode" value="@ViewBag.ContractReviewStatusCode " />
<el-table :data="tableConfig.tableData.all"
:element-loading-text="loadingTxt"
v-loading="loading.table"
height="100%"
size="small"
ref="tableData"
id="exportTab"
border
@@selection-change="mainTableSelectChange"
@@row-click="New_mainTableSelectChange"
@@row-dblclick="review"
highlight-current-row>
<el-table-column type="selection" align="center" fixed></el-table-column>
<template v-for="(column,index) in tableConfig.tableColumn.filter(item => item.show )">
<el-table-column v-if="column.field === 'F_OrderStatus'" :prop="column.field" :label="column.label" :min-width="column.width" :sortable="column.sortable?true:false" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.F_OrderStatusString }}
</template>
</el-table-column>
<el-table-column v-else-if="column.field === 'F_ReceptorName'" :prop="column.field" :label="column.label" :min-width="column.width" :sortable="column.sortable?true:false" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.F_ReceptorName }}
</template>
</el-table-column>
<el-table-column v-else-if="column.field === 'F_OrderNo'" :prop="column.field" :label="column.label" :min-width="column.width" :sortable="column.sortable?true:false" show-overflow-tooltip>
<template slot-scope="scope">
<span style="color:blue">
@*{{scope.row.F_OrderNo}}*@
<a href="javascript:void(0)">{{ scope.row.F_ReportNo }}</a>
</span>
</template>
</el-table-column>
<el-table-column v-else
:key="index"
:label="column.label"
:fixed="column.fixed"
:width="column.width"
:prop="column.field"
:sortable="column.sortable?true:false"
show-overflow-tooltip>
</el-table-column>
</template>
<el-table-column :width="tableConfig.OperateIsFold?120:302"
fixed="right"
align="center">
<template #header="{ scope }">
<span style="float:left;margin-left:10px">操作</span>
</template>
<template scope="scope">
<div UtSoft-gridauthorize="no">
<el-row>
<el-tooltip effect="light" content="编辑" placement="top-start">
<el-button action="edit" icon="el-icon-edit" type="primary" circle size="mini" />
</el-tooltip>
<el-tooltip effect="light" content="删除" placement="top-start">
<el-button action="delete" icon="el-icon-delete" type="danger" circle size="mini" />
</el-tooltip>
</el-row>
</div>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer>
<el-pagination :current-page="pageConfig.page"
@@size-change="pageLimitChange"
@@current-change="pageOffsetChange"
:page-sizes="[10,15, 20, 30, 50,100,200,500,1000]"
:page-size="pageConfig.rows"
:total="pageConfig.records"
layout="total, sizes, prev, pager, next, jumper"
background>
</el-pagination>
</el-footer>
</el-container>
</div>
// JS部分的
var orderTemp = new Vue({
el: '#orderTemp',
filters: {
//日期格式化
dateFormat(val) {
let value = ''
if (val) {
const arr = val.split(' ')
if (arr.length > 0) {
value = arr[0]
}
}
return value
},
},
data: function () {
return {
selectContractTypeTabsValue: 'ContractType6', // tab栏默认的一栏
contractTabs: [
{
title: '合同待提交',
name: 'ContractType1'
},
{
title: '被退回',
name: 'ContractType2'
},
{
title: '全部',
name: 'ContractType6'
}
],
loadingTxt: '',
loading: {
table: false,
items: false,
insertIteming: false,
getOrderItems: false,
batchEditing: false
},
tableConfig: {
OperateIsFold: true,//表格操作列是否折叠,默认折叠的
tableData: {
all: [],
select: [],
seleSingle: {}
},
tableColumn: [
{ field: "F_OrderNo", show: true, label: "申请编号", fixed: true, width: "160", sortable: true },
{ field: "F_DepartmentId", show: false, label: "申请部门", width: "140", sortable: true },
{ field: "F_ReceptorName", show: false, label: "申请人", width: "100", sortable: true },
{ field: "F_PayDepartment", show: false, label: "费用承担", width: "120", sortable: false },
{ field: "F_PayCenter", show: false, label: "成本中心", width: "120", sortable: false },
{ field: "F_IsSampleReturnName", show: false, label: "样品返还", width: "120", sortable: false },
{ field: "F_IsReport", show: false, label: "出具报告", width: "120", sortable: false },
{ field: "F_OrderName", show: true, label: "标题", width: "160", sortable: true },
{ field: "F_OrderStatus", show: true, label: "订单状态", width: "150", sortable: true },
{ field: "F_TestTypeName", show: true, label: "申请类型", width: "150", sortable: false },
{ field: "F_DemandType", show: true, label: "需求类型", width: "150", sortable: false },
{ field: "F_Priority", show: true, label: "优先级", width: "120", sortable: false },
{ field: "F_TestSource", show: true, label: "样品类型", width: "150", sortable: false },
{ field: "F_FactoryName", show: true, label: "工厂", width: "120", sortable: false },
{ field: "F_ProxyCustName", show: true, label: "客户", width: "150", sortable: true },
{ field: "F_CommiteDate", show: true, label: "受理日期", width: 140, sortable: true },
{ field: "F_ReturnReason", show: true, label: "退回原因说明", width: "120", sortable: false },
]
},
pageConfig: {
//每页行数F_IsCutOff
rows: 15,
// 当前页
page: 1,
//总记录数
records: 0,
mainId: 'F_OrderId',
//排序列
sidx: 'F_CreateDate',
//排序类型
sord: 'desc',
//总页数
total: 0
},
toolQuery: {
queryParams: {
F_Priority: '',
F_Receptor: '',
F_OrderName: '',
F_OrderNo: '',
ContractType: 6,
},
queryParamsShow: false
},
}
},
created() {
console.clear();
},
computed: {
},
mounted() {
this.getPageList();
},
methods: function () {
return {
/**
* 搜索数据
* */
searchData() {
this.pageConfig.page = 1;
this.getPageList();
},
/**
* 获取列表数据
* */
getPageList() {
this.$refs.tableData.clearSort() //清空排序
let obj = JSON.parse(JSON.stringify(this.toolQuery.queryParams))
const params = {
pagination: JSON.stringify(this.pageConfig),
queryJson: JSON.stringify(obj)
}
this.loading.table = true
this.tableConfig.tableData.select.length = 0
this.loadingTxt = '正在加载'
window.setTimeout(() => {
UtSoft.httpAsync('GET', '/Order/Order/GetPageList', params, (result) => {
this.loading.table = false
this.loadingTxt = ''
if (result) {
this.tableConfig.tableData.all = result.rows
console.log('合同列表的数据', this.tableConfig.tableData.all)
this.pageConfig.records = result.records
this.pageConfig.total = result.total
} else {
this.$notify.error({ title: '错误', message: '获取列表失败,请联系管理员处理' })
}
})
}, 300)
},
/**
* 重置搜索
* */
resetForm() {
this.$nextTick(() => {
this.toolQuery.queryParams = {
F_Priority: '',
F_Receptor: '',
F_OrderName: '',
F_OrderNo: '',
}
})
},
/**
* Tab栏切换
* */
ContractTypeClick(tab, event) {
if (tab.name === "ContractType1") {
this.toolQuery.queryParams.ContractType = 1
}
if (tab.name === "ContractType2") {
this.toolQuery.queryParams.ContractType = 2
}
if (tab.name === "ContractType3") {
this.toolQuery.queryParams.ContractType = 3
}
if (tab.name === "ContractType4") {
this.toolQuery.queryParams.ContractType = 4
}
if (tab.name === "ContractType5") {
this.toolQuery.queryParams.ContractType = 5
}
if (tab.name === "ContractType6") {
this.toolQuery.queryParams.ContractType = 6
}
if (tab.name === "ContractType7") {//已作废
this.toolQuery.queryParams.ContractType = 7
}
// if (tab.name === "ContractType10") {//未分配评审
// this.toolQuery.queryParams.ContractType = 10
// }
this.pageConfig.page = 1
this.getPageList()
},
/**
* 刷新
* */
ReFresh() {
this.reGetOrderData()
},
/**
* 表格勾选数据变化事件
* @param {any} selection
*/
mainTableSelectChange(selection) {
console.log('表格数据勾选变化调用了',selection)
this.tableConfig.tableData.select = selection;
},
/**
* 表格行数据选中事件
*/
New_mainTableSelectChange(row) {
this.$refs.tableData.toggleRowSelection(row);
},
/**
* 表格行数据双击选中
*/
review(row) {
console.log('双击预览', row.F_TestTypeName, row.F_AllTestItemDesc)
console.log('双击预览', row)
},
///翻页事件
pageOffsetChange(offset) {
this.pageConfig.page = offset;
this.getPageList();
},
///页大小变化
pageLimitChange(limit) {
this.pageConfig.rows = limit;
this.getPageList();
},
}
}()
})
上面的代码模板拿来要记得修改修改，
下面放两张搜索栏打开和关闭情况下表格的高度图片
|情况| 图片 |
|
|
|
| | |
2219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
