|
|
|
|
@ -0,0 +1,661 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']">
|
|
|
|
|
<div v-if="hasTreeFieldInQueryForm"
|
|
|
|
|
class="left-container">
|
|
|
|
|
<AnjiTree ref="queryFormTree"
|
|
|
|
|
v-model.trim="queryParams[queryFormTreeField.field]"
|
|
|
|
|
:is-open="queryFormTreeField.anjiTreeOption.isOpen"
|
|
|
|
|
:enable-filter="queryFormTreeField.anjiTreeOption.enableFilter"
|
|
|
|
|
:label-name="queryFormTreeField.label"
|
|
|
|
|
:url="queryFormTreeField.anjiTreeOption.url"
|
|
|
|
|
@node-click="handleTreeNodeCheck" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right-container">
|
|
|
|
|
<!-- 查询表单开始 -->
|
|
|
|
|
<el-form ref="formSearch"
|
|
|
|
|
:model="queryParams"
|
|
|
|
|
label-width="100px">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col v-for="(item, index) in queryFormFieldExcludeTree"
|
|
|
|
|
:key="item.field"
|
|
|
|
|
:span="queryFormFieldSpan(item)">
|
|
|
|
|
<el-form-item v-if="index <= 2 || (index > 2 && queryParams.showMoreSearch)"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:rules="item.rules"
|
|
|
|
|
:prop="item.field">
|
|
|
|
|
<!-- 输入框 -->
|
|
|
|
|
<el-input v-if="item.inputType == 'input' || item.inputType == 'input-number'"
|
|
|
|
|
v-model.trim="queryParams[item.field]"
|
|
|
|
|
:placeholder="item.placeholder || '请输入'"
|
|
|
|
|
:clearable="item.clearable !== false"
|
|
|
|
|
:disabled="item.disabled"
|
|
|
|
|
@change="(value) => queryFormChange(item.field, value)" />
|
|
|
|
|
<!-- 开关 -->
|
|
|
|
|
<el-switch v-else-if="item.inputType == 'switch'"
|
|
|
|
|
v-model.trim="queryParams[item.field]"
|
|
|
|
|
:disabled="item.disabled"
|
|
|
|
|
:active-value="item.switchOption.disableValue"
|
|
|
|
|
:inactive-value="item.switchOption.enableValue"
|
|
|
|
|
active-color="#5887fb"
|
|
|
|
|
inactive-color="#ccc"
|
|
|
|
|
@change="(value) => queryFormChange(item.field, value)" />
|
|
|
|
|
<!-- 下拉框 -->
|
|
|
|
|
<anji-select v-else-if="item.inputType == 'anji-select'"
|
|
|
|
|
v-model.trim="queryParams[item.field]"
|
|
|
|
|
:multiple="item.anjiSelectOption.multiple"
|
|
|
|
|
:dict-code="item.anjiSelectOption.dictCode"
|
|
|
|
|
:url="item.anjiSelectOption.url"
|
|
|
|
|
:method="item.anjiSelectOption.method"
|
|
|
|
|
:query-param="item.anjiSelectOption.queryParam"
|
|
|
|
|
:option="item.anjiSelectOption.option"
|
|
|
|
|
:label="item.anjiSelectOption.label"
|
|
|
|
|
:disabled-options="item.anjiSelectOption.disabledOptions"
|
|
|
|
|
:disabled="item.disabled"
|
|
|
|
|
:merge-label="item.anjiSelectOption.mergeLabel"
|
|
|
|
|
@change="(value) => queryFormChange(item.field, value)" />
|
|
|
|
|
<!-- 日期时间框 -->
|
|
|
|
|
<el-date-picker v-else-if="item.inputType.indexOf('date') >= 0"
|
|
|
|
|
v-model="queryParams[item.field]"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
:placeholder="item.placeholder || '请选择'"
|
|
|
|
|
:type="item.inputType"
|
|
|
|
|
:clearable="item.clearable !== false"
|
|
|
|
|
@change="(value) => queryFormChange(item.field, value)" />
|
|
|
|
|
<!-- 待扩展的表单类型，请自行扩展 -->
|
|
|
|
|
<el-input v-else
|
|
|
|
|
placeholder="组件不支持此类型表单请至组件内部自行扩展"
|
|
|
|
|
disabled />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :span="6"
|
|
|
|
|
style="text-align: center">
|
|
|
|
|
<el-button type="primary"
|
|
|
|
|
@click="handleQueryForm('query')">查询</el-button>
|
|
|
|
|
<el-button type="danger"
|
|
|
|
|
@click="handleResetForm()">重置</el-button>
|
|
|
|
|
<a style="margin-left: 8px"
|
|
|
|
|
@click="handleToggleMoreSearch">
|
|
|
|
|
{{ queryParams.showMoreSearch == true ? '收起' : '展开' }}
|
|
|
|
|
<i :class="queryParams.showMoreSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
|
|
|
|
|
</a>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 查询表单结束 -->
|
|
|
|
|
|
|
|
|
|
<!-- 批量操作 -->
|
|
|
|
|
<slot name="buttonLeftOnTable" />
|
|
|
|
|
<el-button v-if="option.buttons.add.isShow == undefined ? true : option.buttons.add.isShow"
|
|
|
|
|
v-permission="option.buttons.add.permission"
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-plus"
|
|
|
|
|
@click="handleOpenEditView('add')">新增</el-button>
|
|
|
|
|
<el-button v-if="option.buttons.delete.isShow == undefined ? true : option.buttons.delete.isShow"
|
|
|
|
|
v-permission="option.buttons.delete.permission"
|
|
|
|
|
:disabled="disableBatchDelete"
|
|
|
|
|
type="danger"
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
@click="handleDeleteBatch()">删除</el-button>
|
|
|
|
|
|
|
|
|
|
<!-- 表格开始 -->
|
|
|
|
|
<el-table :data="records"
|
|
|
|
|
border
|
|
|
|
|
@selection-change="handleSelectionChange"
|
|
|
|
|
@sort-change="handleSortChange">
|
|
|
|
|
<!--多选-->
|
|
|
|
|
<el-table-column fixed
|
|
|
|
|
type="selection"
|
|
|
|
|
width="50"
|
|
|
|
|
align="center" />
|
|
|
|
|
<!--隐藏列-->
|
|
|
|
|
<el-table-column v-if="tableExpandColumns.length > 0"
|
|
|
|
|
type="expand">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<p v-for="item in tableExpandColumns"
|
|
|
|
|
:key="item.field"
|
|
|
|
|
class="table-expand-item">
|
|
|
|
|
<span class="titel"> {{ item.label }}: </span>
|
|
|
|
|
<span>{{ scope.row[item.field] }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!--序号-->
|
|
|
|
|
<el-table-column label="序号"
|
|
|
|
|
min-width="50"
|
|
|
|
|
align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ queryParams.pageSize * (queryParams.pageNumber - 1) + scope.$index + 1 }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<template v-for="item in option.columns">
|
|
|
|
|
<el-table-column v-if="item.tableHide != true && item.columnType != 'expand'"
|
|
|
|
|
:key="item.field"
|
|
|
|
|
:prop="item.field"
|
|
|
|
|
:label="fieldLabel(item)"
|
|
|
|
|
:min-width="item.minWidth || 110"
|
|
|
|
|
:sortable="item.sortable"
|
|
|
|
|
:show-overflow-tooltip="true"
|
|
|
|
|
align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div v-if="item.columnType == 'imgPreview'">
|
|
|
|
|
<!-- 图片缩略图-->
|
|
|
|
|
<el-image style="width: 25%; height: 50%"
|
|
|
|
|
fit="contain"
|
|
|
|
|
:src="scope.row[item.field]"
|
|
|
|
|
:preview-src-list="[scope.row[item.field]]" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<span v-if="item.inputType == 'switch' && !item.colorStyle">
|
|
|
|
|
<el-switch v-model.trim="scope.row[item.field]"
|
|
|
|
|
:active-value="1"
|
|
|
|
|
:inactive-value="0"
|
|
|
|
|
active-color="#5887fb"
|
|
|
|
|
inactive-color="#ccc"
|
|
|
|
|
@change="switchChange(scope.row, item.switchOption)" />
|
|
|
|
|
</span>
|
|
|
|
|
<!-- 带单位 -->
|
|
|
|
|
<span v-else-if="item.inputType == 'anji-input'">{{ fieldValueByAnjiInput(scope.row[item.field], item) }}</span>
|
|
|
|
|
<!--表格 a 合并 b上-->
|
|
|
|
|
<span v-else-if="item.mergeColumn">{{ scope.row[item.field] }}({{ scope.row[item.mergeColumn] }})</span>
|
|
|
|
|
<!-- 没有单位 -->
|
|
|
|
|
<span v-else-if="item.colorStyle"
|
|
|
|
|
:class="item.colorStyle[scope.row[item.editField]]">{{ fieldValueByRowRenderer(scope.row, item) }}</span>
|
|
|
|
|
<span v-else>{{ fieldValueByRowRenderer(scope.row, item) }}</span>
|
|
|
|
|
<!-- 正常展示模式
|
|
|
|
|
<div v-if="!item.custom">
|
|
|
|
|
是第一列数据 && 需要高亮字段不为false 高亮并且可以点击
|
|
|
|
|
<span v-if="!index && item.operate !== false" class="view" @click="handleOpenEditView('view', scope.row)">{{ scope.row[item.field] }}</span>
|
|
|
|
|
<span v-else>{{ scope.row[item.field] }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
-->
|
|
|
|
|
<!-- 自定义展示数据
|
|
|
|
|
<div v-else v-html="item.renderer(scope.row)" />-->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</template>
|
|
|
|
|
<!--操作栏-->
|
|
|
|
|
<el-table-column align="center"
|
|
|
|
|
fixed="right"
|
|
|
|
|
label="操作"
|
|
|
|
|
:width="option.buttons.customButton && option.buttons.customButton.operationWidth ? option.buttons.customButton.operationWidth : 100">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<slot name="edit"
|
|
|
|
|
:msg="scope.row" />
|
|
|
|
|
<el-button v-if="option.buttons.edit.isShow == undefined ? true : option.buttons.edit.isShow"
|
|
|
|
|
type="text"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleOpenEditView('edit', scope.row)">编辑</el-button>
|
|
|
|
|
<el-button v-if="hasRowCustomButton == false && option.buttons.delete.isShow == undefined ? true : option.buttons.edit.isShow"
|
|
|
|
|
type="text"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleDeleteBatch(scope.row)">删除</el-button>
|
|
|
|
|
<el-dropdown v-if="hasRowCustomButton"
|
|
|
|
|
trigger="click">
|
|
|
|
|
<span class="el-dropdown-link"> 更多<i class="el-icon-caret-bottom el-icon--right" /> </span>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<el-dropdown-item class="clearfix">
|
|
|
|
|
<slot name="rowButton"
|
|
|
|
|
:msg="scope.row" />
|
|
|
|
|
<el-button v-if="option.buttons.delete.isShow == undefined ? true : option.buttons.edit.isShow"
|
|
|
|
|
type="text"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="handleDeleteBatch(scope.row)">删除</el-button>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="pagination">
|
|
|
|
|
<el-pagination v-show="total > 0"
|
|
|
|
|
background
|
|
|
|
|
:current-page.sync="queryParams.pageNumber"
|
|
|
|
|
:page-sizes="$pageSizeAll"
|
|
|
|
|
:page-size="queryParams.pageSize"
|
|
|
|
|
layout="total, prev, pager, next, jumper, sizes"
|
|
|
|
|
:total="total"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange" />
|
|
|
|
|
<div>
|
|
|
|
|
<slot name="tableSelectionBtn"
|
|
|
|
|
:selection="checkRecords" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 表格结束 -->
|
|
|
|
|
|
|
|
|
|
<EditDialog ref="edit"
|
|
|
|
|
:option="option"
|
|
|
|
|
:model-type="editDialogModelType"
|
|
|
|
|
:visible="editDialogOpen"
|
|
|
|
|
:row-data="editDialogRowData"
|
|
|
|
|
@closeEvent="editDialogClosedEvent">
|
|
|
|
|
<template v-slot:customCard>
|
|
|
|
|
<slot name="cardInEditPage" />
|
|
|
|
|
</template>
|
|
|
|
|
<template slot="editBtn"
|
|
|
|
|
slot-scope="scope">
|
|
|
|
|
<slot name="editBtnPage"
|
|
|
|
|
:rowData="scope" />
|
|
|
|
|
</template>
|
|
|
|
|
</EditDialog>
|
|
|
|
|
</div>
|
|
|
|
|
<slot name="pageSection" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import AnjiTree from '@/components/AnjiPlus/anji-tree.vue'
|
|
|
|
|
import EditDialog from './edit'
|
|
|
|
|
import request from '@/utils/request'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
EditDialog,
|
|
|
|
|
AnjiTree,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
option: {
|
|
|
|
|
require: true,
|
|
|
|
|
type: Object,
|
|
|
|
|
default: () => {
|
|
|
|
|
return {
|
|
|
|
|
// 查询表单条件
|
|
|
|
|
queryFormFields: [],
|
|
|
|
|
// 按钮
|
|
|
|
|
buttons: {
|
|
|
|
|
query: {},
|
|
|
|
|
edit: {},
|
|
|
|
|
delete: {},
|
|
|
|
|
add: {},
|
|
|
|
|
},
|
|
|
|
|
// 表格列
|
|
|
|
|
columns: [],
|
|
|
|
|
queryFormChange: (fileName, val) => { },
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
// 查询表单提交的值
|
|
|
|
|
queryParams: {
|
|
|
|
|
showMoreSearch: false, // 是否展开更多搜索条件
|
|
|
|
|
pageNumber: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
order: '',
|
|
|
|
|
sort: '',
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
checkRecords: [], // 表格中当前选中的记录
|
|
|
|
|
records: [], // 接口返回的记录列表
|
|
|
|
|
total: 0, // 接口返回的总条数
|
|
|
|
|
|
|
|
|
|
// 编辑详情弹框
|
|
|
|
|
editDialogOpen: false, // 新建时主动打开编辑弹框
|
|
|
|
|
editDialogRowData: {}, // 编辑时的主键
|
|
|
|
|
editDialogModelType: 'view', // 编辑 查看
|
|
|
|
|
|
|
|
|
|
hasRowCustomButton: false, // 除了编辑删除外，还有自定义的行按钮
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
// 左侧树形查询条件
|
|
|
|
|
queryFormTreeField () {
|
|
|
|
|
var treeField = this.option.queryFormFields.find((item) => item['inputType'] == 'anji-tree')
|
|
|
|
|
return treeField
|
|
|
|
|
},
|
|
|
|
|
// 查询条件里是否有树形控件
|
|
|
|
|
hasTreeFieldInQueryForm () {
|
|
|
|
|
return this.isNotBlank(this.queryFormTreeField)
|
|
|
|
|
},
|
|
|
|
|
// 不包含树形控件的查询条件
|
|
|
|
|
queryFormFieldExcludeTree () {
|
|
|
|
|
var treeFields = this.option.queryFormFields.filter((item) => item['inputType'] != 'anji-tree')
|
|
|
|
|
return treeFields
|
|
|
|
|
},
|
|
|
|
|
// 主键的列名
|
|
|
|
|
primaryKeyFieldName () {
|
|
|
|
|
var primaryKey = this.option.columns.find((item) => item['primaryKey'] == true)
|
|
|
|
|
if (primaryKey != null) {
|
|
|
|
|
return primaryKey['field']
|
|
|
|
|
} else {
|
|
|
|
|
return null
|
|
|
|
|
console.warn('在columns中查找primaryKey=true失败，会导致查询详情和删除失败')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 表格中可展开的列
|
|
|
|
|
tableExpandColumns () {
|
|
|
|
|
var expandColumns = this.option.columns.filter((item) => item['columnType'] == 'expand')
|
|
|
|
|
return expandColumns
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 是否可以批量删除
|
|
|
|
|
disableBatchDelete () {
|
|
|
|
|
return this.checkRecords.length <= 0
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created () {
|
|
|
|
|
// 为查询框中所有input加上默认值
|
|
|
|
|
this.option.queryFormFields.forEach((item) => {
|
|
|
|
|
// 动态添加属性
|
|
|
|
|
this.$set(this.queryParams, item.field, item.defaultValue || null)
|
|
|
|
|
})
|
|
|
|
|
// 查询列表
|
|
|
|
|
this.handleQueryForm('query')
|
|
|
|
|
this.queryFormChange()
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
if (this.$scopedSlots['rowButton'] != null) {
|
|
|
|
|
this.hasRowCustomButton = true
|
|
|
|
|
} else {
|
|
|
|
|
this.hasRowCustomButton = false
|
|
|
|
|
}
|
|
|
|
|
console.log(`是否有自定义行按钮: ${this.hasRowCustomButton}`)
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
queryFormFieldSpan (item) {
|
|
|
|
|
// console.log(item)
|
|
|
|
|
|
|
|
|
|
if (item.span != null) {
|
|
|
|
|
return item.span
|
|
|
|
|
} else {
|
|
|
|
|
return 6
|
|
|
|
|
}
|
|
|
|
|
// let rowLength = this.option.queryFormFields.length;
|
|
|
|
|
// console.log(rowLength, "ss")
|
|
|
|
|
// console.log(rowLength % 3)
|
|
|
|
|
// if (rowLength <= 3) {
|
|
|
|
|
// return 6
|
|
|
|
|
// }
|
|
|
|
|
// else if (rowLength % 3 == 0) {
|
|
|
|
|
// return 8
|
|
|
|
|
// } else if (rowLength > 6) {
|
|
|
|
|
// return 8
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
// 切换更多搜索条件
|
|
|
|
|
handleToggleMoreSearch () {
|
|
|
|
|
this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch
|
|
|
|
|
},
|
|
|
|
|
// 列上排序切换
|
|
|
|
|
handleSortChange (column) {
|
|
|
|
|
// {column: {…}, prop: "orgCode", order: "ascending"}
|
|
|
|
|
if (column == null || column.prop == null) {
|
|
|
|
|
console.warn('排序字段名prop为空，无法排序')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
var sort = column.prop // 列表查询默认排序列
|
|
|
|
|
var order = column.order == 'ascending' ? 'ASC' : 'DESC'
|
|
|
|
|
this.queryParams['sort'] = sort
|
|
|
|
|
this.queryParams['order'] = order
|
|
|
|
|
this.handleQueryForm('query')
|
|
|
|
|
},
|
|
|
|
|
// 查询按钮
|
|
|
|
|
handleQueryForm (from) {
|
|
|
|
|
// 如果是点查询按钮，把树的查询属性去掉
|
|
|
|
|
if (from == 'query') {
|
|
|
|
|
if (this.hasTreeFieldInQueryForm) {
|
|
|
|
|
delete this.queryParams[this.queryFormTreeField.field]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 如果是点树查询，把查询区里的属性去掉
|
|
|
|
|
if (from == 'tree') {
|
|
|
|
|
if (this.hasTreeFieldInQueryForm) {
|
|
|
|
|
var treeVal = this.queryParams[this.queryFormTreeField.field]
|
|
|
|
|
this.queryParams = {
|
|
|
|
|
pageNumber: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
}
|
|
|
|
|
this.queryParams[this.queryFormTreeField.field] = treeVal
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 默认的排序
|
|
|
|
|
if (this.isBlank(this.queryParams['order']) && this.isNotBlank(this.option.buttons.query.order)) {
|
|
|
|
|
this.queryParams['sort'] = this.option.buttons.query.sort
|
|
|
|
|
this.queryParams['order'] = this.option.buttons.query.order
|
|
|
|
|
}
|
|
|
|
|
this.queryParams.pageNumber = 1
|
|
|
|
|
this.handleQueryPageList()
|
|
|
|
|
},
|
|
|
|
|
// 列表查询
|
|
|
|
|
async handleQueryPageList () {
|
|
|
|
|
var params = this.queryParams
|
|
|
|
|
// 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort')
|
|
|
|
|
const { data, code } = await this.option.buttons.query.api(params)
|
|
|
|
|
if (code != '200') return
|
|
|
|
|
this.records = data.records
|
|
|
|
|
this.total = data.total
|
|
|
|
|
},
|
|
|
|
|
// 重置
|
|
|
|
|
handleResetForm () {
|
|
|
|
|
this.queryParams = {
|
|
|
|
|
pageNumber: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
}
|
|
|
|
|
// this.$refs['queryForm'].resetFields()
|
|
|
|
|
// this.records = []
|
|
|
|
|
// this.total = 0
|
|
|
|
|
},
|
|
|
|
|
// 树形查询条件点击回调
|
|
|
|
|
handleTreeNodeCheck () {
|
|
|
|
|
this.handleQueryForm('tree')
|
|
|
|
|
// 为新建页面的对应属性值，绑定上对应的默认值
|
|
|
|
|
var treeFieldName = this.queryFormTreeField['field']
|
|
|
|
|
for (var i = 0; i < this.option.columns.length; i++) {
|
|
|
|
|
var item = this.option.columns[i]
|
|
|
|
|
if (item['editField'] == treeFieldName || item['field'] == treeFieldName) {
|
|
|
|
|
this.$set(this.option.columns[i], 'defaultValue', this.queryParams[treeFieldName])
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 编辑和查看操作
|
|
|
|
|
handleOpenEditView (modelType, row) {
|
|
|
|
|
if (modelType == 'view' || modelType == 'edit') {
|
|
|
|
|
this.editDialogRowData = row
|
|
|
|
|
}
|
|
|
|
|
this.editDialogModelType = modelType
|
|
|
|
|
if (modelType == 'add') {
|
|
|
|
|
// 新增模式，不需要查询数据详情，直接打开
|
|
|
|
|
this.editDialogOpen = true
|
|
|
|
|
}
|
|
|
|
|
const obj = {
|
|
|
|
|
type: modelType,
|
|
|
|
|
value: row,
|
|
|
|
|
}
|
|
|
|
|
this.$emit('handleCustomValue', obj)
|
|
|
|
|
},
|
|
|
|
|
// 弹框被关闭时的回调事件
|
|
|
|
|
editDialogClosedEvent (value) {
|
|
|
|
|
// 把列表页中弹框打开标记改成已关闭
|
|
|
|
|
this.editDialogOpen = false
|
|
|
|
|
// 关闭弹出框时，如果有树，刷新下
|
|
|
|
|
if (this.hasTreeFieldInQueryForm && this.$refs.queryFormTree != null && !value) {
|
|
|
|
|
this.$refs.queryFormTree.queryData()
|
|
|
|
|
}
|
|
|
|
|
this.handleQueryPageList()
|
|
|
|
|
// 关闭时 清空表单的验证规则
|
|
|
|
|
this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields()
|
|
|
|
|
},
|
|
|
|
|
// 批量删除
|
|
|
|
|
handleDeleteBatch (row) {
|
|
|
|
|
var ids = []
|
|
|
|
|
if (row != null) {
|
|
|
|
|
ids.push(row[this.primaryKeyFieldName]) // 删除指定的行
|
|
|
|
|
} else {
|
|
|
|
|
// 批量删除选中的行
|
|
|
|
|
ids = this.checkRecords.map((item) => item[this.primaryKeyFieldName])
|
|
|
|
|
}
|
|
|
|
|
this.$confirm('删除确认', '确认要删除吗?', {
|
|
|
|
|
type: 'warning',
|
|
|
|
|
confirmButtonClass: 'delete_sure',
|
|
|
|
|
cancelButtonClass: 'el-button--danger is-plain',
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.option.buttons.delete.api(ids).then((res) => {
|
|
|
|
|
// {code: "200", message: "操作成功", data: true}
|
|
|
|
|
this.checkRecords = []
|
|
|
|
|
// 关闭弹出框时，如果有树，刷新下
|
|
|
|
|
if (this.hasTreeFieldInQueryForm && this.$refs.queryFormTree != null) {
|
|
|
|
|
this.$refs.queryFormTree.queryData()
|
|
|
|
|
}
|
|
|
|
|
this.handleQueryPageList()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.catch((e) => {
|
|
|
|
|
e
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 选择项改变时
|
|
|
|
|
handleSelectionChange (val) {
|
|
|
|
|
this.checkRecords = val
|
|
|
|
|
},
|
|
|
|
|
// 页码改变
|
|
|
|
|
handleCurrentChange (pageNumber) {
|
|
|
|
|
this.queryParams.pageNumber = pageNumber
|
|
|
|
|
this.handleQueryPageList()
|
|
|
|
|
},
|
|
|
|
|
// 每页size改变时
|
|
|
|
|
handleSizeChange (val) {
|
|
|
|
|
this.queryParams.pageNumber = 1
|
|
|
|
|
this.queryParams.pageSize = val
|
|
|
|
|
this.handleQueryPageList()
|
|
|
|
|
},
|
|
|
|
|
// table列文件缩略图
|
|
|
|
|
thumbnailUrl (row, field) {
|
|
|
|
|
// return 'http://10.108.3.123:9090/tms/file/download/79ee7e8b-2a9a-4142-b06d-706ac8089205'
|
|
|
|
|
// if (row.filePath) {
|
|
|
|
|
// if (row.filePath.endsWith('xlsx') || row.filePath.endsWith('xls')) {
|
|
|
|
|
// return fileExcel;
|
|
|
|
|
// } else if (row.filePath.endsWith('pdf')) {
|
|
|
|
|
// return filePdf;
|
|
|
|
|
// }
|
|
|
|
|
// return process.env.VUE_APP_BASE_API + '/tms/file/download/' + row.fileId;
|
|
|
|
|
// } else {
|
|
|
|
|
// return logo;
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
// 带单位的列，需要转换
|
|
|
|
|
fieldLabel (columnConfig) {
|
|
|
|
|
if (columnConfig == null) {
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
if (columnConfig.inputType == 'anji-input' && columnConfig.anjiInput != null) {
|
|
|
|
|
return `${columnConfig.label}(${columnConfig.anjiInput.unit})`
|
|
|
|
|
} else {
|
|
|
|
|
return columnConfig.label
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 带单位的输入框
|
|
|
|
|
fieldValueByAnjiInput (value, columnConfig) {
|
|
|
|
|
if (columnConfig == null) {
|
|
|
|
|
return value
|
|
|
|
|
}
|
|
|
|
|
if (columnConfig.inputType == 'anji-input' && columnConfig.anjiInput != null) {
|
|
|
|
|
return value / columnConfig.anjiInput.conversion
|
|
|
|
|
} else {
|
|
|
|
|
return value
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 带表格列格式化的值
|
|
|
|
|
fieldValueByRowRenderer (row, columnConfig) {
|
|
|
|
|
if (columnConfig == null || typeof columnConfig.fieldTableRowRenderer != 'function') {
|
|
|
|
|
return row[columnConfig.field]
|
|
|
|
|
} else {
|
|
|
|
|
return columnConfig.fieldTableRowRenderer(row)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 暴露给外部crud页面，回传saveForm的值
|
|
|
|
|
getMainEntity () {
|
|
|
|
|
return this.$refs.edit.getSaveForm()
|
|
|
|
|
},
|
|
|
|
|
setMainEntity (object) {
|
|
|
|
|
this.$refs.edit.setSaveForm(object)
|
|
|
|
|
},
|
|
|
|
|
async switchChange (val, api) {
|
|
|
|
|
request({
|
|
|
|
|
url: api.url,
|
|
|
|
|
method: 'put',
|
|
|
|
|
headers: { noPrompt: false },
|
|
|
|
|
data: [val.id],
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
this.handleQueryPageList()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
queryFormChange (fileName, fieldVal) {
|
|
|
|
|
if (typeof this.option.queryFormChange == 'function') {
|
|
|
|
|
this.option.queryFormChange(this.queryParams, fileName, fieldVal)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.style-btn {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.page-container {
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
.left-container {
|
|
|
|
|
width: 20%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 4px 0px 0px 4px;
|
|
|
|
|
padding: 20px 20px 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.right-container {
|
|
|
|
|
width: calc(80% - 5px);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 0px 4px 4px 0px;
|
|
|
|
|
padding: 20px 20px 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-table .cell,
|
|
|
|
|
.el-table td div {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.el-dropdown {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
display: inline;
|
|
|
|
|
color: #5887fb;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.el-dropdown-menu--mini .el-dropdown-menu__item {
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
max-width: 110px;
|
|
|
|
|
float: right;
|
|
|
|
|
.el-button--text {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
&:hover {
|
|
|
|
|
background: none !important;
|
|
|
|
|
}
|
|
|
|
|
.el-button--mini {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
.el-button + .el-button {
|
|
|
|
|
margin-left: 0 !important;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.pagination {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
木子李·De
3 years ago