ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update table

Browse Source
qianlishi 3 years ago
parent 7b421eb959
commit fd6649d6c9
1 changed files with 387 additions and 166 deletions
Show Stats Download Patch File Download Diff File

553
report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue
Unescape Escape View File

@ -1,34 +1,107 @@
<template> <template>
<div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']"> <div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']">
<div v-if="hasTreeFieldInQueryForm" class="left-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" /> <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>
<div class="right-container"> <div class="right-container">
<!-- 查询表单开始 --> <!-- 查询表单开始 -->
<el-form ref="formSearch" :model="queryParams" label-width="100px" v-permission="option.buttons.query.permission"> <el-form
ref="formSearch"
:model="queryParams"
label-width="100px"
v-permission="option.buttons.query.permission"
>
<el-row> <el-row>
<el-col v-for="(item, index) in queryFormFieldExcludeTree" :key="item.field" :span="queryFormFieldSpan(item)"> <el-col
<el-form-item v-if="index <= 2 || (index > 2 && queryParams.showMoreSearch)" :label="item.label" :rules="item.rules" :prop="item.field"> 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-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)" /> <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" <anji-select
:merge-label="item.anjiSelectOption.mergeLabel" @change="(value) => queryFormChange(item.field, value)" /> 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-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-input
v-else
placeholder="组件不支持此类型表单请至组件内部自行扩展"
disabled
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6" style="text-align: center"> <el-col :span="6" style="text-align: center">
<el-button type="primary" @click="handleQueryForm('query')">查询</el-button> <el-button type="primary" @click="handleQueryForm('query')"
>查询</el-button
>
<el-button type="danger" @click="handleResetForm()">重置</el-button> <el-button type="danger" @click="handleResetForm()">重置</el-button>
<a style="margin-left: 8px" @click="handleToggleMoreSearch"> <a style="margin-left: 8px" @click="handleToggleMoreSearch">
{{ queryParams.showMoreSearch == true ? '收起' : '展开' }} {{ queryParams.showMoreSearch == true ? "收起" : "展开" }}
<i :class="queryParams.showMoreSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> <i
:class="
queryParams.showMoreSearch
? 'el-icon-arrow-up'
: 'el-icon-arrow-down'
"
/>
</a> </a>
</el-col> </el-col>
</el-row> </el-row>
@ -37,17 +110,50 @@
<!-- 批量操作 --> <!-- 批量操作 -->
<slot name="buttonLeftOnTable" /> <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
<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> 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
class="anji_curd_table"
:data="records"
border
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
>
<!--多选--> <!--多选-->
<el-table-column fixed type="selection" width="50" align="center" /> <el-table-column fixed type="selection" width="50" align="center" />
<!--隐藏列--> <!--隐藏列-->
<el-table-column v-if="tableExpandColumns.length > 0" type="expand"> <el-table-column v-if="tableExpandColumns.length > 0" type="expand">
<template slot-scope="scope"> <template slot-scope="scope">
<p v-for="item in tableExpandColumns" :key="item.field" class="table-expand-item"> <p
v-for="item in tableExpandColumns"
:key="item.field"
class="table-expand-item"
>
<span class="titel"> {{ item.label }}: </span> <span class="titel"> {{ item.label }}: </span>
<span>{{ scope.row[item.field] }}</span> <span>{{ scope.row[item.field] }}</span>
</p> </p>
@ -56,28 +162,65 @@
<!--序号--> <!--序号-->
<el-table-column label="序号" min-width="50" align="center"> <el-table-column label="序号" min-width="50" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{ queryParams.pageSize * (queryParams.pageNumber - 1) + scope.$index + 1 }} {{
queryParams.pageSize * (queryParams.pageNumber - 1) +
scope.$index +
1
}}
</template> </template>
</el-table-column> </el-table-column>
<template v-for="item in option.columns"> <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"> <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"> <template slot-scope="scope">
<div v-if="item.columnType == 'imgPreview'"> <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]]" /> <el-image
style="width: 25%; height: 50%"
fit="contain"
:src="scope.row[item.field]"
:preview-src-list="[scope.row[item.field]]"
/>
</div> </div>
<div v-else> <div v-else>
<span v-if="item.inputType == 'switch' && !item.colorStyle"> <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)" /> <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>
<!-- 带单位 --> <!-- 带单位 -->
<span v-else-if="item.inputType == 'anji-input'">{{ fieldValueByAnjiInput(scope.row[item.field], item) }}</span> <span v-else-if="item.inputType == 'anji-input'">{{
fieldValueByAnjiInput(scope.row[item.field], item)
}}</span>
<!--表格 a 合并 b上--> <!--表格 a 合并 b上-->
<span v-else-if="item.mergeColumn">{{ scope.row[item.field] }}({{ scope.row[item.mergeColumn] }})</span> <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
<span v-else>{{ fieldValueByRowRenderer(scope.row, item) }}</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"> <div v-if="!item.custom">
是第一列数据 && 需要高亮字段不为false 高亮并且可以点击 是第一列数据 && 需要高亮字段不为false 高亮并且可以点击
@ -92,18 +235,76 @@
</el-table-column> </el-table-column>
</template> </template>
<!--操作栏--> <!--操作栏-->
<el-table-column align="center" fixed="right" label="操作" :width="option.buttons.customButton && option.buttons.customButton.operationWidth ? option.buttons.customButton.operationWidth : 100"> <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"> <template slot-scope="scope">
<slot name="edit" :msg="scope.row" /> <slot name="edit" :msg="scope.row" />
<el-button v-if="(option.buttons.query.isShow == undefined ? true : option.buttons.query.isShow) && hasPermission(option.buttons.edit.permission) == false" type="text" size="small" @click="handleOpenEditView('view', scope.row)" v-permission="option.buttons.query.permission" >查看</el-button> <el-button
<el-button v-if="option.buttons.edit.isShow == undefined ? true : option.buttons.edit.isShow" type="text" size="small" @click="handleOpenEditView('edit', scope.row)" v-permission="option.buttons.edit.permission" >编辑</el-button> v-if="
<el-button v-if="hasRowCustomButton == false && option.buttons.delete.isShow == undefined ? true : option.buttons.edit.isShow" type="text" size="small" @click="handleDeleteBatch(scope.row)" v-permission="option.buttons.delete.permission" >删除</el-button> (option.buttons.query.isShow == undefined
? true
: option.buttons.query.isShow) &&
hasPermission(option.buttons.edit.permission) == false
"
type="text"
size="small"
@click="handleOpenEditView('view', scope.row)"
v-permission="option.buttons.query.permission"
>查看</el-button
>
<el-button
v-if="
option.buttons.edit.isShow == undefined
? true
: option.buttons.edit.isShow
"
type="text"
size="small"
@click="handleOpenEditView('edit', scope.row)"
v-permission="option.buttons.edit.permission"
>编辑</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)"
v-permission="option.buttons.delete.permission"
>删除</el-button
>
<el-dropdown v-if="hasRowCustomButton" trigger="click"> <el-dropdown v-if="hasRowCustomButton" trigger="click">
<span class="el-dropdown-link"> 更多<i class="el-icon-caret-bottom el-icon--right" /> </span> <span class="el-dropdown-link">
更多<i class="el-icon-caret-bottom el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix"> <el-dropdown-item class="clearfix">
<slot name="rowButton" :msg="scope.row" /> <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)" v-permission="option.buttons.delete.permission" >删除</el-button> <el-button
v-if="
option.buttons.delete.isShow == undefined
? true
: option.buttons.edit.isShow
"
type="text"
size="small"
@click="handleDeleteBatch(scope.row)"
v-permission="option.buttons.delete.permission"
>删除</el-button
>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -111,7 +312,17 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <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" /> <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> <div>
<slot name="tableSelectionBtn" :selection="checkRecords" /> <slot name="tableSelectionBtn" :selection="checkRecords" />
</div> </div>
@ -119,7 +330,14 @@
<!-- 表格结束 --> <!-- 表格结束 -->
<EditDialog ref="edit" :option="option" :model-type="editDialogModelType" :visible="editDialogOpen" :row-data="editDialogRowData" @closeEvent="editDialogClosedEvent"> <EditDialog
ref="edit"
:option="option"
:model-type="editDialogModelType"
:visible="editDialogOpen"
:row-data="editDialogRowData"
@closeEvent="editDialogClosedEvent"
>
<template v-slot:customCard> <template v-slot:customCard>
<slot name="cardInEditPage" /> <slot name="cardInEditPage" />
</template> </template>
@ -132,13 +350,13 @@
</div> </div>
</template> </template>
<script> <script>
import AnjiTree from '@/components/AnjiPlus/anji-tree.vue' import AnjiTree from "@/components/AnjiPlus/anji-tree.vue";
import EditDialog from './edit' import EditDialog from "./edit";
import request from '@/utils/request' import request from "@/utils/request";
export default { export default {
components: { components: {
EditDialog, EditDialog,
AnjiTree, AnjiTree
}, },
props: { props: {
option: { option: {
@ -153,14 +371,14 @@ export default {
query: {}, query: {},
edit: {}, edit: {},
delete: {}, delete: {},
add: {}, add: {}
}, },
// 表格列 // 表格列
columns: [], columns: [],
queryFormChange: (fileName, val) => {}, queryFormChange: (fileName, val) => {}
} };
}, }
}, }
}, },
data() { data() {
return { return {
@ -169,8 +387,8 @@ export default {
showMoreSearch: false, // 是否展开更多搜索条件 showMoreSearch: false, // 是否展开更多搜索条件
pageNumber: 1, pageNumber: 1,
pageSize: 10, pageSize: 10,
order: '', order: "",
sort: '', sort: ""
}, },
checkRecords: [], // 表格中当前选中的记录 checkRecords: [], // 表格中当前选中的记录
@ -180,73 +398,73 @@ export default {
// 编辑详情弹框 // 编辑详情弹框
editDialogOpen: false, // 新建时主动打开编辑弹框 editDialogOpen: false, // 新建时主动打开编辑弹框
editDialogRowData: {}, // 编辑时的主键 editDialogRowData: {}, // 编辑时的主键
editDialogModelType: 'view', // 编辑 查看 editDialogModelType: "view", // 编辑 查看
hasRowCustomButton: false, // 除了编辑删除外，还有自定义的行按钮 hasRowCustomButton: false // 除了编辑删除外，还有自定义的行按钮
} };
}, },
computed: { computed: {
// 左侧树形查询条件 // 左侧树形查询条件
queryFormTreeField() { queryFormTreeField() {
var treeField = this.option.queryFormFields.find( var treeField = this.option.queryFormFields.find(
(item) => item['inputType'] == 'anji-tree' item => item["inputType"] == "anji-tree"
) );
return treeField return treeField;
}, },
// 查询条件里是否有树形控件 // 查询条件里是否有树形控件
hasTreeFieldInQueryForm() { hasTreeFieldInQueryForm() {
return this.isNotBlank(this.queryFormTreeField) return this.isNotBlank(this.queryFormTreeField);
}, },
// 不包含树形控件的查询条件 // 不包含树形控件的查询条件
queryFormFieldExcludeTree() { queryFormFieldExcludeTree() {
var treeFields = this.option.queryFormFields.filter( var treeFields = this.option.queryFormFields.filter(
(item) => item['inputType'] != 'anji-tree' item => item["inputType"] != "anji-tree"
) );
return treeFields return treeFields;
}, },
// 主键的列名 // 主键的列名
primaryKeyFieldName() { primaryKeyFieldName() {
var primaryKey = this.option.columns.find( var primaryKey = this.option.columns.find(
(item) => item['primaryKey'] == true item => item["primaryKey"] == true
) );
if (primaryKey != null) { if (primaryKey != null) {
return primaryKey['field'] return primaryKey["field"];
} else { } else {
return null return null;
console.warn( console.warn(
'在columns中查找primaryKey=true失败，会导致查询详情和删除失败' "在columns中查找primaryKey=true失败，会导致查询详情和删除失败"
) );
} }
}, },
// 表格中可展开的列 // 表格中可展开的列
tableExpandColumns() { tableExpandColumns() {
var expandColumns = this.option.columns.filter( var expandColumns = this.option.columns.filter(
(item) => item['columnType'] == 'expand' item => item["columnType"] == "expand"
) );
return expandColumns return expandColumns;
}, },
// 是否可以批量删除 // 是否可以批量删除
disableBatchDelete() { disableBatchDelete() {
return this.checkRecords.length <= 0 return this.checkRecords.length <= 0;
}, }
}, },
created() { created() {
// 为查询框中所有input加上默认值 // 为查询框中所有input加上默认值
this.option.queryFormFields.forEach((item) => { this.option.queryFormFields.forEach(item => {
// 动态添加属性 // 动态添加属性
this.$set(this.queryParams, item.field, item.defaultValue || null) this.$set(this.queryParams, item.field, item.defaultValue || null);
}) });
// 查询列表 // 查询列表
this.handleQueryForm('query') this.handleQueryForm("query");
this.queryFormChange() this.queryFormChange();
}, },
mounted() { mounted() {
if (this.$scopedSlots['rowButton'] != null) { if (this.$scopedSlots["rowButton"] != null) {
this.hasRowCustomButton = true this.hasRowCustomButton = true;
} else { } else {
this.hasRowCustomButton = false this.hasRowCustomButton = false;
} }
}, },
methods: { methods: {
@ -254,9 +472,9 @@ export default {
// console.log(item) // console.log(item)
if (item.span != null) { if (item.span != null) {
return item.span return item.span;
} else { } else {
return 6 return 6;
} }
// let rowLength = this.option.queryFormFields.length; // let rowLength = this.option.queryFormFields.length;
// console.log(rowLength, "ss") // console.log(rowLength, "ss")
@ -272,169 +490,169 @@ export default {
}, },
// 切换更多搜索条件 // 切换更多搜索条件
handleToggleMoreSearch() { handleToggleMoreSearch() {
this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch;
}, },
// 列上排序切换 // 列上排序切换
handleSortChange(column) { handleSortChange(column) {
// {column: {…}, prop: "orgCode", order: "ascending"} // {column: {…}, prop: "orgCode", order: "ascending"}
if (column == null || column.prop == null) { if (column == null || column.prop == null) {
console.warn('排序字段名prop为空，无法排序') console.warn("排序字段名prop为空，无法排序");
return return;
} }
var sort = column.prop // 列表查询默认排序列 var sort = column.prop; // 列表查询默认排序列
var order = column.order == 'ascending' ? 'ASC' : 'DESC' var order = column.order == "ascending" ? "ASC" : "DESC";
this.queryParams['sort'] = sort this.queryParams["sort"] = sort;
this.queryParams['order'] = order this.queryParams["order"] = order;
this.handleQueryForm('query') this.handleQueryForm("query");
}, },
// 查询按钮 // 查询按钮
handleQueryForm(from) { handleQueryForm(from) {
// 如果是点查询按钮，把树的查询属性去掉 // 如果是点查询按钮，把树的查询属性去掉
if (from == 'query') { if (from == "query") {
if (this.hasTreeFieldInQueryForm) { if (this.hasTreeFieldInQueryForm) {
delete this.queryParams[this.queryFormTreeField.field] delete this.queryParams[this.queryFormTreeField.field];
} }
} }
// 如果是点树查询，把查询区里的属性去掉 // 如果是点树查询，把查询区里的属性去掉
if (from == 'tree') { if (from == "tree") {
if (this.hasTreeFieldInQueryForm) { if (this.hasTreeFieldInQueryForm) {
var treeVal = this.queryParams[this.queryFormTreeField.field] var treeVal = this.queryParams[this.queryFormTreeField.field];
this.queryParams = { this.queryParams = {
pageNumber: 1, pageNumber: 1,
pageSize: 10, pageSize: 10
} };
this.queryParams[this.queryFormTreeField.field] = treeVal this.queryParams[this.queryFormTreeField.field] = treeVal;
} }
} }
// 默认的排序 // 默认的排序
if ( if (
this.isBlank(this.queryParams['order']) && this.isBlank(this.queryParams["order"]) &&
this.isNotBlank(this.option.buttons.query.order) this.isNotBlank(this.option.buttons.query.order)
) { ) {
this.queryParams['sort'] = this.option.buttons.query.sort this.queryParams["sort"] = this.option.buttons.query.sort;
this.queryParams['order'] = this.option.buttons.query.order this.queryParams["order"] = this.option.buttons.query.order;
} }
this.queryParams.pageNumber = 1 this.queryParams.pageNumber = 1;
this.handleQueryPageList() this.handleQueryPageList();
}, },
// 列表查询 // 列表查询
async handleQueryPageList() { async handleQueryPageList() {
var params = this.queryParams var params = this.queryParams;
// 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort') // 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort')
const { data, code } = await this.option.buttons.query.api(params) const { data, code } = await this.option.buttons.query.api(params);
if (code != '200') return if (code != "200") return;
this.records = data.records this.records = data.records;
this.total = data.total this.total = data.total;
}, },
// 重置 // 重置
handleResetForm() { handleResetForm() {
this.queryParams = { this.queryParams = {
pageNumber: 1, pageNumber: 1,
pageSize: 10, pageSize: 10
} };
// this.$refs['queryForm'].resetFields() // this.$refs['queryForm'].resetFields()
// this.records = [] // this.records = []
// this.total = 0 // this.total = 0
}, },
// 树形查询条件点击回调 // 树形查询条件点击回调
handleTreeNodeCheck() { handleTreeNodeCheck() {
this.handleQueryForm('tree') this.handleQueryForm("tree");
// 为新建页面的对应属性值，绑定上对应的默认值 // 为新建页面的对应属性值，绑定上对应的默认值
var treeFieldName = this.queryFormTreeField['field'] var treeFieldName = this.queryFormTreeField["field"];
for (var i = 0; i < this.option.columns.length; i++) { for (var i = 0; i < this.option.columns.length; i++) {
var item = this.option.columns[i] var item = this.option.columns[i];
if ( if (
item['editField'] == treeFieldName || item["editField"] == treeFieldName ||
item['field'] == treeFieldName item["field"] == treeFieldName
) { ) {
this.$set( this.$set(
this.option.columns[i], this.option.columns[i],
'defaultValue', "defaultValue",
this.queryParams[treeFieldName] this.queryParams[treeFieldName]
) );
break break;
} }
} }
}, },
// 编辑和查看操作 // 编辑和查看操作
handleOpenEditView(modelType, row) { handleOpenEditView(modelType, row) {
if (modelType == 'view' || modelType == 'edit') { if (modelType == "view" || modelType == "edit") {
this.editDialogRowData = row this.editDialogRowData = row;
} }
this.editDialogModelType = modelType this.editDialogModelType = modelType;
if (modelType == 'add') { if (modelType == "add") {
// 新增模式，不需要查询数据详情，直接打开 // 新增模式，不需要查询数据详情，直接打开
this.editDialogOpen = true this.editDialogOpen = true;
} }
const obj = { const obj = {
type: modelType, type: modelType,
value: row, value: row
} };
this.$emit('handleCustomValue', obj) this.$emit("handleCustomValue", obj);
}, },
// 弹框被关闭时的回调事件 // 弹框被关闭时的回调事件
editDialogClosedEvent(value) { editDialogClosedEvent(value) {
// 把列表页中弹框打开标记改成已关闭 // 把列表页中弹框打开标记改成已关闭
this.editDialogOpen = false this.editDialogOpen = false;
// 关闭弹出框时，如果有树，刷新下 // 关闭弹出框时，如果有树，刷新下
if ( if (
this.hasTreeFieldInQueryForm && this.hasTreeFieldInQueryForm &&
this.$refs.queryFormTree != null && this.$refs.queryFormTree != null &&
!value !value
) { ) {
this.$refs.queryFormTree.queryData() this.$refs.queryFormTree.queryData();
} }
this.handleQueryPageList() this.handleQueryPageList();
// 关闭时 清空表单的验证规则 // 关闭时 清空表单的验证规则
this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields() this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields();
}, },
// 批量删除 // 批量删除
handleDeleteBatch(row) { handleDeleteBatch(row) {
var ids = [] var ids = [];
if (row != null) { if (row != null) {
ids.push(row[this.primaryKeyFieldName]) // 删除指定的行 ids.push(row[this.primaryKeyFieldName]); // 删除指定的行
} else { } else {
// 批量删除选中的行 // 批量删除选中的行
ids = this.checkRecords.map((item) => item[this.primaryKeyFieldName]) ids = this.checkRecords.map(item => item[this.primaryKeyFieldName]);
} }
this.$confirm('删除确认', '确认要删除吗?', { this.$confirm("删除确认", "确认要删除吗?", {
type: 'warning', type: "warning",
confirmButtonClass: 'delete_sure', confirmButtonClass: "delete_sure",
cancelButtonClass: 'el-button--danger is-plain', cancelButtonClass: "el-button--danger is-plain"
}) })
.then(() => { .then(() => {
this.option.buttons.delete.api(ids).then((res) => { this.option.buttons.delete.api(ids).then(res => {
// {code: "200", message: "操作成功", data: true} // {code: "200", message: "操作成功", data: true}
this.checkRecords = [] this.checkRecords = [];
// 关闭弹出框时，如果有树，刷新下 // 关闭弹出框时，如果有树，刷新下
if ( if (
this.hasTreeFieldInQueryForm && this.hasTreeFieldInQueryForm &&
this.$refs.queryFormTree != null this.$refs.queryFormTree != null
) { ) {
this.$refs.queryFormTree.queryData() this.$refs.queryFormTree.queryData();
} }
this.handleQueryPageList() this.handleQueryPageList();
}) });
})
.catch((e) => {
e
}) })
.catch(e => {
e;
});
}, },
// 选择项改变时 // 选择项改变时
handleSelectionChange(val) { handleSelectionChange(val) {
this.checkRecords = val this.checkRecords = val;
}, },
// 页码改变 // 页码改变
handleCurrentChange(pageNumber) { handleCurrentChange(pageNumber) {
this.queryParams.pageNumber = pageNumber this.queryParams.pageNumber = pageNumber;
this.handleQueryPageList() this.handleQueryPageList();
}, },
// 每页size改变时 // 每页size改变时
handleSizeChange(val) { handleSizeChange(val) {
this.queryParams.pageNumber = 1 this.queryParams.pageNumber = 1;
this.queryParams.pageSize = val this.queryParams.pageSize = val;
this.handleQueryPageList() this.handleQueryPageList();
}, },
// table列文件缩略图 // table列文件缩略图
thumbnailUrl(row, field) { thumbnailUrl(row, field) {
@ -453,66 +671,66 @@ export default {
// 带单位的列，需要转换 // 带单位的列，需要转换
fieldLabel(columnConfig) { fieldLabel(columnConfig) {
if (columnConfig == null) { if (columnConfig == null) {
return '' return "";
} }
if ( if (
columnConfig.inputType == 'anji-input' && columnConfig.inputType == "anji-input" &&
columnConfig.anjiInput != null columnConfig.anjiInput != null
) { ) {
return `${columnConfig.label}(${columnConfig.anjiInput.unit})` return `${columnConfig.label}(${columnConfig.anjiInput.unit})`;
} else { } else {
return columnConfig.label return columnConfig.label;
} }
}, },
// 带单位的输入框 // 带单位的输入框
fieldValueByAnjiInput(value, columnConfig) { fieldValueByAnjiInput(value, columnConfig) {
if (columnConfig == null) { if (columnConfig == null) {
return value return value;
} }
if ( if (
columnConfig.inputType == 'anji-input' && columnConfig.inputType == "anji-input" &&
columnConfig.anjiInput != null columnConfig.anjiInput != null
) { ) {
return value / columnConfig.anjiInput.conversion return value / columnConfig.anjiInput.conversion;
} else { } else {
return value return value;
} }
}, },
// 带表格列格式化的值 // 带表格列格式化的值
fieldValueByRowRenderer(row, columnConfig) { fieldValueByRowRenderer(row, columnConfig) {
if ( if (
columnConfig == null || columnConfig == null ||
typeof columnConfig.fieldTableRowRenderer != 'function' typeof columnConfig.fieldTableRowRenderer != "function"
) { ) {
return row[columnConfig.field] return row[columnConfig.field];
} else { } else {
return columnConfig.fieldTableRowRenderer(row) return columnConfig.fieldTableRowRenderer(row);
} }
}, },
// 暴露给外部crud页面，回传saveForm的值 // 暴露给外部crud页面，回传saveForm的值
getMainEntity() { getMainEntity() {
return this.$refs.edit.getSaveForm() return this.$refs.edit.getSaveForm();
}, },
setMainEntity(object) { setMainEntity(object) {
this.$refs.edit.setSaveForm(object) this.$refs.edit.setSaveForm(object);
}, },
async switchChange(val, api) { async switchChange(val, api) {
request({ request({
url: api.url, url: api.url,
method: 'put', method: "put",
headers: { noPrompt: false }, headers: { noPrompt: false },
data: [val.id], data: [val.id]
}).then((response) => { }).then(response => {
this.handleQueryPageList() this.handleQueryPageList();
}) });
}, },
queryFormChange(fileName, fieldVal) { queryFormChange(fileName, fieldVal) {
if (typeof this.option.queryFormChange == 'function') { if (typeof this.option.queryFormChange == "function") {
this.option.queryFormChange(this.queryParams, fileName, fieldVal) this.option.queryFormChange(this.queryParams, fileName, fieldVal);
} }
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -579,4 +797,7 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.anji_curd_table {
margin-top: 20px;
}
</style> </style>

Write Preview
Loading…
Cancel
Save