ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update AddForm、Search组件修改

Browse Source
This commit is contained in:
赵霄
2023-08-29 16:44:45 +08:00
parent f560c8a64c
commit fecd8c01cc
10 changed files with 577 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/api_address_config.js
Vendored
+1 -1
View File
@@ -12,5 +12,5 @@ window._CONFIG.casPrefixUrl = 'http://cas.example.org:8443/cas'
window._CONFIG.onlinePreviewDomainURL = 'http://127.0.0.1:8012/onlinePreview'
// onlyOffice前端服务地址
window._CONFIG.onlyOfficeUrl = 'http://127.0.0.1:8080'
// onlyOffice下载文件地址
// onlyOffice下载文件地址（暂时没用）
window._CONFIG.onlyOfficeDownloadFileUrl = 'http://localhost:8184/sys/common/download'
src/api/standardRegulationLibraryApi.js
+17
View File
@@ -0,0 +1,17 @@
import { getAction } from './manage'
// 国内法规标准-获取查询条件
const getDomesticStandardSearchForm = (params) => getAction('/laws/standard/domestic/getQueryCondition', params)
// 国内法规标准-获取表单模型
const getDomesticStandardFormModal = (params) => getAction('/laws/standard/domestic/getFormModel', params)
// 国内法规标准-获取信息
const getDomesticStandardDocumentInfo = (params) => getAction('/laws/standard/domestic/getByIdAndModule', params)
// 国内法规标准-获取表头信息
const getDomesticStandardTableHeader = (params) => getAction('/laws/standard/domestic/getCommonHeader', params)
export {
getDomesticStandardSearchForm,
getDomesticStandardFormModal,
getDomesticStandardDocumentInfo,
getDomesticStandardTableHeader
}
src/assets/less/common.less
+13 -1
View File
@@ -387,6 +387,7 @@
height: 100%;
padding: 24px;
box-sizing: border-box;
overflow-y: auto;
}
}
@@ -459,6 +460,7 @@
/*抽屉样式修改*/
.ant-drawer-body {
height: calc(100vh - 55px);
padding: 24px 0;
.ant-spin-container {
height: 100%;
@@ -467,9 +469,19 @@
.drawer-container {
height: calc(100% - 52px);
overflow: auto;
padding: 0 24px;
}
.drawer-footer {
margin-top: 20px;
height: 32px;
display: flex;
justify-content: center;
.ant-btn {
margin-left: 30px;
margin-bottom: 30px;
float: right;
}
}
}
}
src/components/customField/AddForm.vue
+48 -24
View File
@@ -2,14 +2,14 @@
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
<div v-for="(val,index) in dataList" :key="index">
<div v-if="val && val.length > 0" class="header-text">{{ index }}</div>
<a-row v-if="val && val.length > 0" :gutter="24">
<a-row v-if="val && val.length > 0">
<div v-for="(item, index) in val" :key="index">
<!-- 1, 日期单选 -->
<a-col :span="12" v-if="item.fieldShowType === FieldType.DATE_SINGLE.value">
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<a-date-picker class="box-input"
@@ -19,7 +19,7 @@
value-format="YYYY-MM-DD"
v-model="formInline[item.dbFieldName]"
:disabled="disabled"
style="width: 100%"/>
style="width: 100%" />
</a-form-model-item>
</div>
</a-col>
@@ -28,14 +28,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
type="radio"
selectType="user"
:disabled="disabled"/>
:disabled="disabled" />
</a-form-model-item>
</div>
</a-col>
@@ -44,14 +44,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
selectType="organ"
type="radio"
:disabled="disabled"/>
:disabled="disabled" />
</a-form-model-item>
</div>
</a-col>
@@ -60,7 +60,7 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<j-multiple-date-picker class="box-input" v-model="formInline[item.dbFieldName]" :fieldName="item.dbFieldName"
@@ -73,14 +73,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model-textarea" :prop="item.dbFieldName">
<a-textarea
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"
:disabled="disabled"
:maxLength="500"
v-model="formInline[item.dbFieldName]" :rows="4"/>
v-model="formInline[item.dbFieldName]" :rows="4" />
</a-form-model-item>
</div>
</a-col>
@@ -89,14 +89,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<standard-selection :query="item"
:disabled="disabled"
:standard="formInline"
@change="standardSelectionChange"
v-model="formInline[item.dbFieldName]"/>
v-model="formInline[item.dbFieldName]" />
</a-form-model-item>
</div>
</a-col>
@@ -105,14 +105,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<user-or-organ-selection :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
selectType="organ"
type="checkbox"
:disabled="disabled"/>
:disabled="disabled" />
</a-form-model-item>
</div>
</a-col>
@@ -121,7 +121,7 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<a-button type="primary" class="button-text"
@@ -141,14 +141,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<a-input class="box-input"
:disabled="disabled"
v-model="formInline[item.dbFieldName]"
:maxLength="50"
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"/>
:placeholder="$t('pleaseEnter')+item.dbFieldTxt" />
</a-form-model-item>
</div>
</a-col>
@@ -157,14 +157,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<j-dict-select-tag class="box-input" v-model="formInline[item.dbFieldName]"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
:triggerChange="false" :dictCode="item.dict_field" />
</a-form-model-item>
</div>
</a-col>
@@ -173,14 +173,14 @@
<div class="box-title-text">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{item.dbFieldTxt}}</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<j-multi-select-tag class="box-input" v-model="formInline[item.dbFieldName]"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
:triggerChange="false" :dictCode="item.dict_field" />
</a-form-model-item>
</div>
</a-col>
@@ -214,7 +214,6 @@
</template>
<script>
import { getAction } from '@/api/manage'
import JDictSelectTag from '../dict/JDictSelectTag'
import JMultiSelectTag from '../dict/JMultiSelectTag'
import UploadFile from '../UploadFile'
@@ -235,6 +234,24 @@ export default {
return {}
}
},
// 获取表单数据的方法
getFormFunc: {
type: Function,
required: false,
default: () => {
return function () {
}
}
},
// 获取详细信息的方法
getDocumentInfoFunc: {
type: Function,
required: false,
default: () => {
return function () {
}
}
},
flag: {
type: String,
default: ''
@@ -348,7 +365,11 @@ export default {
this.type = 'edit'
this.loading = true
this.getForm(() => {
getAction(this.url.getDocumentInfo, { id: item.id }).then((res) => {
if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
this.loading = false
return
}
this.getDocumentInfoFunc({ id: item.id }).then((res) => {
if (res.success) {
this.formInline = res.result[0]
this.loading = false
@@ -360,12 +381,15 @@ export default {
},
// 获取表单列表
getForm (callBack) {
if (!this.getFormFunc || typeof this.getFormFunc !== 'function') {
return
}
this.confirmLoading = true
const params = {
module: this.flag,
type: this.type
}
getAction(this.url.getAddForm, params).then((res) => {
this.getFormFunc(params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
src/components/customField/Search.vue
+38 -32
View File
@@ -73,19 +73,19 @@
<a-col :md="(24 / (minLength + 1))" :sm="(24 / minLength)" v-for="(item,index) in searchList.slice(3)" :key="index" style="line-height: 48px">
<template v-if="index > minLength && toggleSearchStatus">
<!-- 树形选择器 -->
<!-- <template v-if="item.fieldShowType === FieldType.TREE.value">-->
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-tree-select-->
<!-- tree-node-filter-prop="title"-->
<!-- v-model="queryParam[item.dbFieldName]"-->
<!-- :maxTagCount="1"-->
<!-- :getPopupContainer="triggerNode=> triggerNode.parentNode"-->
<!-- :tree-data="item.tree"-->
<!-- tree-checkable-->
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- <template v-if="item.fieldShowType === FieldType.TREE.value">-->
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-tree-select-->
<!-- tree-node-filter-prop="title"-->
<!-- v-model="queryParam[item.dbFieldName]"-->
<!-- :maxTagCount="1"-->
<!-- :getPopupContainer="triggerNode=> triggerNode.parentNode"-->
<!-- :tree-data="item.tree"-->
<!-- tree-checkable-->
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- 输入框 -->
<template v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
FieldType.ORGAN_SINGLE.value, FieldType.STANDARD_MORE.value, FieldType.ORGAN_MORE.value]
@@ -96,20 +96,20 @@
</a-form-item>
</template>
<!-- 数字输入框 -->
<!-- <template v-else-if="item.fieldShowType === FieldType.TEXT_NUMBER.value">-->
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-input-number :placeholder="$t('pleaseEnter')+item.dbFieldTxt"-->
<!-- v-model="queryParam[item.dbFieldName]" :min="1" :max="99999999"/>-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- <template v-else-if="item.fieldShowType === FieldType.TEXT_NUMBER.value">-->
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <a-input-number :placeholder="$t('pleaseEnter')+item.dbFieldTxt"-->
<!-- v-model="queryParam[item.dbFieldName]" :min="1" :max="99999999"/>-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- 字典多选框 -->
<!-- <template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">-->
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <j-multi-select-tag v-model="queryParam[item.dbFieldName]"-->
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt" :type="'select'"-->
<!-- :triggerChange="false" :dictCode="item.dict_field"/>-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- <template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">-->
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!-- <j-multi-select-tag v-model="queryParam[item.dbFieldName]"-->
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt" :type="'select'"-->
<!-- :triggerChange="false" :dictCode="item.dict_field"/>-->
<!-- </a-form-item>-->
<!-- </template>-->
<!-- 日期区间选择器 -->
<template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.fieldShowType)">
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -124,7 +124,7 @@
<j-dict-select-tag v-model="queryParam[item.dbFieldName]"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false" :dictCode="item.dict_field"/>
:triggerChange="false" :dictCode="item.dict_field" />
</a-form-item>
</template>
</template>
@@ -137,16 +137,18 @@
import JDictSelectTag from '../dict/JDictSelectTag'
import { FieldType } from '../../enums/commonEnums'
import eventBus from '@/common/event'
import { getAction } from '@/api/manage'
export default {
name: 'Search',
components: { JDictSelectTag },
props: {
url: {
type: Object,
// 获取查询条件的方法
getQueryConditionFunc: {
type: Function,
required: false,
default: () => {
return {}
return function () {
}
}
},
flag: { // 暂时不清楚flag的用处，是要查searchList的时候传给后端的
@@ -251,10 +253,14 @@ export default {
},
// 获取查询条件列表
getSearch () {
console.log(this.getQueryConditionFunc)
if (!this.getQueryConditionFunc || typeof this.getQueryConditionFunc !== 'function') {
return
}
const params = {
module: this.flag
}
getAction(this.url.getSearchList, params).then((res) => {
this.getQueryConditionFunc(params).then((res) => {
if (res.success) {
this.searchList = res.result
// if (this.searchQueryList && this.searchQueryList.length > 0) {
src/mixins/ConfigurableTableMixin.js
+9 -9
View File
@@ -1,7 +1,7 @@
/**
* 表头通过标签管理配置的模块的表格数据的混入
*/
import { downFile, downloadFile, getAction, postAction } from '@api/manage'
import { downFile, downloadFile, postAction } from '@api/manage'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import store from '@/store'
@@ -42,8 +42,8 @@ export const ConfigurableTableMixin = {
// type: '', // 这个字段不知道什么含义
filters: {}, // 固定的搜索条件
needFilterTableBtn: true, // 是否需要过滤没有权限的按钮
tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
getTableHeaderFunc: null // 获取表头的方法
}
},
computed: {
@@ -87,11 +87,11 @@ export const ConfigurableTableMixin = {
* 获取表头数据
*/
getTableHeader () {
if (!this.url.tableHeader) {
if (!this.getTableHeaderFunc && typeof this.getTableHeaderFunc !== 'function') {
return
}
const params = { module: this.flag }
getAction(this.url.tableHeader, params).then(res => {
this.getTableHeaderFunc(params).then(res => {
if (res.success) {
this.columns = this.dealColumns(res.result || [])
this.isTrue = false
@@ -326,7 +326,7 @@ export const ConfigurableTableMixin = {
* 批量删除
*/
batchDel () {
if (!this.url.deleteBatch) {
if (!this.url.delete) {
this.$message.error('请设置url.deleteBatch属性!')
return
}
@@ -341,9 +341,9 @@ export const ConfigurableTableMixin = {
this.$confirm({
title: this.$t('confirmBatchDeletion'),
content: this.$t('deleteAData'),
onOk: function() {
onOk: function () {
that.loading = true
postAction(that.url.deleteBatch, { ids: ids }).then((res) => {
postAction(that.url.delete, { ids: ids }).then((res) => {
if (res.success) {
// 重新计算分页问题
that.reCalculatePage(that.selectedRowKeys.length)
@@ -374,7 +374,7 @@ export const ConfigurableTableMixin = {
title: this.$t('confirmDeletion'),
content: this.$t('areYouSure'),
onOk: () => {
postAction(that.url.delete, { id: id }).then((res) => {
postAction(that.url.delete, { ids: id }).then((res) => {
if (res.success) {
that.$message.success(res.message)
// 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
src/views/standardRegulationLibrary/domesticStandard/DomesticStandardList.vue
+35 -23
View File
@@ -4,11 +4,10 @@
<!-- $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
<a-input-search v-model="treeInput" :placeholder="$t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
@search="handleTableSearch" />
<img src="">
<a-tree :show-line="true" :show-icon="true" :tree-data=treeData>
<template #iconCustom="{title}">
<div class="tree-node">
<img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" />
<img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" alt="" />
<a-tooltip>
<template #title>
{{ title }}
@@ -27,13 +26,15 @@
<span class="tree-node-custom-title">{{ title }}</span>
</a-tooltip>
<template v-if="key === mouseInNodeKey">
<a-button icon="plus" class="tree-operate-node-btn">
</a-button>
<!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn"></a-button>
<!-- 编辑-->
<a-button class="tree-operate-node-btn">
<img src="@/assets/image/common/iconTreeEdit.png" />
<img src="@/assets/image/common/iconTreeEdit.png" alt="" />
</a-button>
<!-- 删除-->
<a-button class="tree-operate-node-btn">
<img src="@/assets/image/common/iconTreeDelete.png" />
<img src="@/assets/image/common/iconTreeDelete.png" alt="" />
</a-button>
</template>
</div>
@@ -42,7 +43,11 @@
</div>
<div class="page-right-box">
<div class="table-page-search-wrapper">
<search ref="searchRef" :flag="flag" :url="url" @search="searchQuery" @reset="searchReset" />
<search ref="searchRef"
:url="url"
:get-query-condition-func="getQueryConditionFunc"
@search="searchQuery"
@reset="searchReset" />
</div>
<div class="table-operator">
@@ -82,7 +87,7 @@
@change="tableOnChange">
<template v-slot:operation="{text, record}">
<a>{{$t('standardRegulationLibrary.domesticStandard.collection')}}</a>
<a>{{ $t('standardRegulationLibrary.domesticStandard.collection') }}</a>
<a-divider type="vertical" />
<a-dropdown>
<a-icon type="more" class="operate-icon-btn" />
@@ -90,12 +95,10 @@
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
<a @click="operationClick(operation,record)">
<span v-if="operation.text === $t('docLibrary.cancelCollection')" class="text">
{{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection')
}}
{{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection') }}
</span>
<span v-else-if="operation.text === $t('docLibrary.cancelSubscribe')" class="text">
{{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe')
}}
{{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe') }}
</span>
<span v-else class="text">
{{ operation.text }}
@@ -108,14 +111,19 @@
</j-table>
</div>
</div>
<!-- 新增、编辑-->
<domestic-standard-modal ref="modalForm" @ok="modalFormOk" />
</a-card>
</template>
<script>
import '@assets/less/common.less'
import { ConfigurableTableMixin } from '@/mixins/ConfigurableTableMixin'
import Search from '@comp/customField/Search.vue'
import JTable from '@comp/jero/JTable.vue'
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
import Search from '../../../components/customField/Search.vue'
import JTable from '../../../components/jero/JTable.vue'
import DomesticStandardModal from './modules/DomesticStandardModal.vue'
import { getDomesticStandardTableHeader, getDomesticStandardSearchForm } from '../../../api/standardRegulationLibraryApi'
const apiTreeData = [
{
@@ -142,7 +150,7 @@ const apiTreeData = [
export default {
name: 'DomesticStandardList',
components: { Search, JTable },
components: { Search, JTable, DomesticStandardModal },
mixins: [ConfigurableTableMixin],
data () {
return {
@@ -173,14 +181,12 @@ export default {
has: ''
}
],
getTableHeaderFunc: getDomesticStandardTableHeader,
getQueryConditionFunc: getDomesticStandardSearchForm,
url: {
tableHeader: '/laws/standard/domestic/getCommonHeader',
getSearchList: '/laws/standard/domestic/getQueryCondition',
list: '/laws/standard/domestic/getCommonPage',
delete: '/laws/standard/domestic/deleteByIdsAndModule',
deleteBatch: '/laws/standard/domestic/deleteByIdsAndModule'
},
dataSource: [{ id: '131234' }]
delete: '/laws/standard/domestic/deleteByIdsAndModule'
}
}
},
created () {
@@ -189,7 +195,6 @@ export default {
methods: {
initTreeData () {
this.treeData = this.dealTreeData(apiTreeData)
console.log(this.treeData)
},
dealTreeData (treeData) {
return treeData.map(item => {
@@ -212,6 +217,13 @@ export default {
if (this.mouseInNodeKey === key) {
this.mouseInNodeKey = null
}
},
operationClick (operation, record) {
if (operation.clickEvent === 'handleDelete') {
this.handleDelete(record.id)
} else {
this[operation.clickEvent](record)
}
}
}
}
src/views/standardRegulationLibrary/domesticStandard/modules/DomesticStandardModal.vue
+52 -3
View File
@@ -11,7 +11,10 @@
>
<a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
<div class="drawer-container">
<add-form ref="addForm"
:get-form-func="getFormFunc"
:get-document-info-func="getDocumentInfoFunc"
@submitFormData="submitFormData" />
</div>
<div class="drawer-footer">
<a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
@@ -24,8 +27,13 @@
</template>
<script>
import AddForm from '../../../../components/customField/AddForm.vue'
import { postAction } from '@api/manage'
import { getDomesticStandardDocumentInfo, getDomesticStandardFormModal } from '../../../../api/standardRegulationLibraryApi'
export default {
name: 'DomesticStandardModal',
components: { AddForm },
data () {
return {
visible: false,
@@ -33,16 +41,57 @@ export default {
width: 800,
// 存储表单的数据
form: {},
confirmLoading: false
confirmLoading: false,
getFormFunc: getDomesticStandardFormModal,
getDocumentInfoFunc: getDomesticStandardDocumentInfo,
url: {
getAddForm: '/laws/standard/domestic/getFormModel',
getDocumentInfo: '/laws/standard/domestic/getByIdAndModule',
add: '/laws/standard/domestic/commonAdd',
edit: '/laws/standard/domestic/commonEdit'
}
}
},
methods: {
add () {
this.edit({})
this.visible = true
this.$nextTick(() => {
this.$refs.addForm.add()
})
},
edit (record) {
this.visible = true
},
handleOk () {
this.confirmLoading = true
this.$refs.addForm.submit()
},
// 表单提交的回调，获取表单数据
submitFormData (formInline) {
let url = ''
if (formInline.id) {
url = this.url.edit
} else {
url = this.url.add
}
postAction(url, formInline).then((res) => {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
if (this.formInline.id) {
this.$emit('ok')
} else {
this.$emit('ok')
}
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
}
src/views/standardRegulationLibrary/overseasStandard/OverseasStandardList.vue
+266
View File
@@ -0,0 +1,266 @@
<template>
<a-card :bordered="false" class="page-left-right-layout">
<div class="page-left-box">
<!-- $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
<a-input-search v-model="treeInput" :placeholder="$t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
@search="handleTableSearch" />
<a-tree :show-line="true" :show-icon="true" :tree-data=treeData>
<template #iconCustom="{title}">
<div class="tree-node">
<img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" alt="" />
<a-tooltip>
<template #title>
{{ title }}
</template>
<span class="tree-node-title">{{ title }}</span>
</a-tooltip>
</div>
</template>
<template #custom="{title, key}">
<div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
<a-tooltip>
<template #title>
{{ title }}
</template>
<span class="tree-node-custom-title">{{ title }}</span>
</a-tooltip>
<template v-if="key === mouseInNodeKey">
<!-- 新增-->
<a-button icon="plus" class="tree-operate-node-btn"></a-button>
<!-- 编辑-->
<a-button class="tree-operate-node-btn">
<img src="@/assets/image/common/iconTreeEdit.png" alt="" />
</a-button>
<!-- 删除-->
<a-button class="tree-operate-node-btn">
<img src="@/assets/image/common/iconTreeDelete.png" alt="" />
</a-button>
</template>
</div>
</template>
</a-tree>
</div>
<div class="page-right-box">
<div class="table-page-search-wrapper">
<search ref="searchRef" :url="url" :get-query-condition-func="getQueryConditionFunc" @search="searchQuery" @reset="searchReset" />
</div>
<div class="table-operator">
<!-- 新增-->
<a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
<!-- 导入-->
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="download" ghost>{{ $t('import') }}</a-button>
</a-upload>
<!-- 导出-->
<a-button icon="upload" type="primary" ghost @click="handleExportXls($t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder'))">
{{ $t('export') }}
</a-button>
<!-- 带文件导出-->
<a-button icon="upload" type="primary" ghost>{{ $t('exportWithFile') }}</a-button>
<!-- 模板下载-->
<a-button type="primary" icon="download" ghost @click="downTemplate('standardRegulationLibrary.domesticStandard.templateName')">
{{ $t('templateDownload') }}
</a-button>
<!-- 批量删除-->
<a-button type="primary" icon="delete" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
<!-- 配置标准-->
<a-button type="primary" icon="setting" ghost>{{ $t('standardRegulationLibrary.configStandard') }}</a-button>
<!-- 移出标准-->
<a-button type="primary" icon="minus-circle" ghost>{{ $t('standardRegulationLibrary.removeStandard') }}</a-button>
</div>
<div>
<j-table
v-if="columns && columns.length > 0"
:columns="columns"
:dataSource="dataSource"
:can-drag="true"
rowKey="id"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:pagination="ipagination"
:scroll="{x: '100%'}"
@change="tableOnChange">
<template v-slot:operation="{text, record}">
<a>{{ $t('standardRegulationLibrary.domesticStandard.collection') }}</a>
<a-divider type="vertical" />
<a-dropdown>
<a-icon type="more" class="operate-icon-btn" />
<a-menu slot="overlay">
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
<a @click="operationClick(operation,record)">
<span v-if="operation.text === $t('docLibrary.cancelCollection')" class="text">
{{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection') }}
</span>
<span v-else-if="operation.text === $t('docLibrary.cancelSubscribe')" class="text">
{{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe') }}
</span>
<span v-else class="text">
{{ operation.text }}
</span>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
</j-table>
</div>
</div>
<!-- 新增、编辑-->
<overseas-standard-modal ref="modalForm" @ok="modalFormOk" />
</a-card>
</template>
<script>
import '@assets/less/common.less'
import JTable from '../../../components/jero/JTable.vue'
import Search from '../../../components/customField/Search.vue'
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
import OverseasStandardModal from './modules/OverseasStandardModal.vue'
const apiTreeData = [
{
title: 'parent 1',
key: '0-0',
child: [
{
title: '张晨成',
key: '0-0-0',
disabled: true,
child: [
{ title: 'leaf', key: '0-0-0-0' },
{ title: 'leaf', key: '0-0-0-1' }
]
},
{
title: 'parent 1-1',
key: '0-0-1',
child: [{ key: '0-0-1-0', title: 'zcvc' }]
}
]
}
]
export default {
name: 'OverseasStandardList',
components: { JTable, Search, OverseasStandardModal },
mixins: [ConfigurableTableMixin],
data () {
return {
treeInput: null, // 树查询绑定值
treeData: [],
mouseInNodeKey: null, // 鼠标悬浮的节点key值
showAction: true,
operationList: [
// 收藏
{
text: this.$t('standardRegulationLibrary.domesticStandard.cancelCollection'),
clickEvent: 'collection',
has: ''
},
{
text: this.$t('edit'),
clickEvent: 'handleEdit',
has: ''
},
{
text: this.$t('share'),
clickEvent: 'handleShare',
has: ''
},
{
text: this.$t('delete'),
clickEvent: 'handleDelete',
has: ''
}
],
url: {
tableHeader: '/laws/standard/overseas/getCommonHeader',
getSearchList: '/laws/standard/overseas/getQueryCondition',
list: '/laws/standard/overseas/getCommonHeader',
delete: '/laws/standard/overseas/deleteByIdsAndModule'
}
}
},
created () {
this.initTreeData()
},
methods: {
initTreeData () {
this.treeData = this.dealTreeData(apiTreeData)
},
dealTreeData (treeData) {
return treeData.map(item => {
if (item.child && item.child.length > 0) {
item.scopedSlots = { title: 'iconCustom' }
item.children = this.dealTreeData(item.child)
} else {
item.scopedSlots = { title: 'custom' }
}
return item
})
},
handleTableSearch () {
},
handleTreeMouseover (key) {
this.mouseInNodeKey = key
},
handleTreeMouseout (key) {
if (this.mouseInNodeKey === key) {
this.mouseInNodeKey = null
}
},
operationClick (operation, record) {
if (operation.clickEvent === 'handleDelete') {
this.handleDelete(record.id)
} else {
this[operation.clickEvent](record)
}
}
}
}
</script>
<style scoped lang="less">
/deeo/ .ant-tree li span.ant-tree-iconEle {
display: flex;
justify-content: center;
align-items: center;
}
.tree-icon {
line-height: 24px;
}
.tree-operate-node {
display: flex;
width: 100%;
align-items: center;
&-btn {
width: 20px;
height: 20px;
background: rgba(213, 44, 38, 0.08);
border-radius: 2px 2px 2px 2px;
border: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 4px;
padding: 0;
/deep/ .anticon {
margin-top: 2px;
color: #D52C26;
}
img {
width: 13px;
height: 13px;
}
}
}
</style>
src/views/standardRegulationLibrary/overseasStandard/modules/OverseasStandardModal.vue
+98
View File
@@ -0,0 +1,98 @@
<template>
<a-drawer
:title="title"
:width="width"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
:maskClosable="false"
style="height: 100%;overflow: auto;"
>
<a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
<div class="drawer-container">
<add-form ref="addForm" :url="url" @submitFormData="submitFormData"></add-form>
</div>
<div class="drawer-footer">
<a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
{{ $t('preservation') }}
</a-button>
<a-button @click="handleCancel" style="margin-bottom: 0;">{{ $t('close') }}</a-button>
</div>
</a-spin>
</a-drawer>
</template>
<script>
import AddForm from '../../../../components/customField/AddForm.vue'
import { postAction } from '../../../../api/manage'
export default {
name: 'OverseasStandardModal',
components: { AddForm },
data () {
return {
visible: false,
title: '',
width: 800,
// 存储表单的数据
form: {},
confirmLoading: false,
url: {
getAddForm: '/laws/standard/overseas/getFormModel',
getDocumentInfo: '/laws/standard/overseas/getByIdAndModule',
add: '/laws/standard/overseas/commonAdd',
edit: '/laws/standard/overseas/commonEdit'
}
}
},
methods: {
add () {
this.visible = true
this.$nextTick(() => {
this.$refs.addForm.add()
})
},
edit (record) {
this.visible = true
},
handleOk () {
this.confirmLoading = true
this.$refs.addForm.submit()
},
// 表单提交的回调，获取表单数据
submitFormData (formInline) {
let url = ''
if (formInline.id) {
url = this.url.edit
} else {
url = this.url.add
}
postAction(url, formInline).then((res) => {
if (res.success) {
this.$message.success(this.$t('operationSuccessful'))
if (this.formInline.id) {
this.$emit('ok')
} else {
this.$emit('ok')
}
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
}
}
}
</script>
<style scoped>
</style>