流程
版本list页
版本管路新增按钮绑定事件
<a-button @click="toolIdAdd" type="primary" icon="plus">新增</a-button>
toolIdAdd(){
console.log("toolIds========="+this.toolIds)
this.$refs.modalForm.toolidadd(this.toolIds);
this.$refs.modalForm.title = '新增';
this.$refs.modalForm.disableSubmit = false;
},
form页
toolidadd(toolIds) {
this.toolidedit({},toolIds)
},
toolidedit(record, toolIds) {
this.form.resetFields();
this.model = Object.assign({}, record)
this.visible = true
var modelid = {
toolId: toolIds,
versionNumber: this.model.versionNumber,
updateReason: this.model.updateReason,
functionDescription: this.model.functionDescription,
toolType: this.model.toolType,
urlLink: this.model.urlLink,
sharedPath: this.model.sharedPath,
userId: this.model.userId,
sourceAddress: this.model.sourceAddress,
requirementsDocument: this.model.requirementsDocument,
operationManual: this.model.operationManual,
}
this.$nextTick(() => {
this.form.setFieldsValue(
pick(
modelid,
'toolId',
'versionNumber',
'updateReason',
'functionDescription',
'toolType',
'urlLink',
'sharedPath',
'userId',
'sourceAddress',
'requirementsDocument',
'operationManual'
)
)
})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(
pick(
this.model,
'toolId',
'versionNumber',
'updateReason',
'functionDescription',
'toolType',
'urlLink',
'sharedPath',
'userId',
'sourceAddress',
'requirementsDocument',
'operationManual'
)
)
})
},
modal
toolidadd(toolIds) {
this.visible = true
this.$nextTick(() => {
this.$refs.realForm.toolidadd(toolIds)
})
},
源码
list页
<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="版本号">
<a-input placeholder="请输入版本号" v-model="queryParam.versionNumber"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="版本更新原因">
<a-input placeholder="请输入版本更新原因" v-model="queryParam.updateReason"></a-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="新版本功能描述">
<a-input placeholder="请输入新版本功能描述" v-model="queryParam.functionDescription"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="新工具类型">
<j-dict-select-tag placeholder="请选择新工具类型" v-model="queryParam.toolType" dictCode="tool_type" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="URLlink地址">
<a-input placeholder="请输入URLlink地址" v-model="queryParam.urlLink"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="共享路径地址">
<a-input placeholder="请输入共享路径地址" v-model="queryParam.sharedPath"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="新版本开发者">
<j-select-user-by-dep placeholder="请选择新版本开发者" v-model="queryParam.userId" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="新版本tool源码">
<a-input placeholder="请输入新版本tool源码" v-model="queryParam.sourceAddress"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="新版本需求文档">
<a-input placeholder="请输入新版本需求文档" v-model="queryParam.requirementsDocument"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="新版本操作手册">
<a-input placeholder="请输入新版本操作手册" v-model="queryParam.operationManual"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
<a-button @click="toolIdAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('Tool版本更新表')">导出</a-button>
<a-upload
name="file"
:showUploadList="false"
:multiple="false"
:headers="tokenHeader"
:action="importExcelUrl"
@change="handleImportExcel"
>
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<!-- 高级查询区域 -->
<!-- <j-super-query
:fieldList="superFieldList"
ref="superQueryModal"
@handleSuperQuery="handleSuperQuery"
></j-super-query> -->
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
<!-- table区域-begin -->
<div>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a
>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{ x: true }"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
class="j-table-force-nowrap"
@change="handleTableChange"
>
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
<img
v-else
:src="getImgView(text)"
height="25px"
alt=""
style="max-width: 80px; font-size: 12px; font-style: italic"
/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
<a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
下载
</a-button>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<to-version-modal ref="modalForm" @ok="modalFormOk"></to-version-modal>
</a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ToVersionModal from './modules/ToVersionModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
import { toVersionList, toVersionAdd } from '@api/api'
export default {
name: 'ToVersionList',
mixins: [JeecgListMixin, mixinDevice],
components: {
JDictSelectTag,
JSelectUserByDep,
ToVersionModal,
JSuperQuery,
toVersionList,
toVersionAdd,
},
data() {
return {
toolIds:'',
description: 'Tool版本更新表管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
},
},
// {
// title:'toolId',
// align:"center",
// dataIndex: 'toolId'
// },
{
title: 'Tool名称',
align: 'center',
dataIndex: 'fieldOne',
},
{
title: '版本号',
align: 'center',
dataIndex: 'versionNumber',
},
{
title: '版本更新原因',
align: 'center',
dataIndex: 'updateReason',
},
{
title: '新版本功能描述',
align: 'center',
dataIndex: 'functionDescription',
scopedSlots: { customRender: 'htmlSlot' },
},
{
title: '新工具类型',
align: 'center',
dataIndex: 'toolType_dictText',
},
{
title: 'URLlink地址',
align: 'center',
dataIndex: 'urlLink',
},
{
title: '共享路径地址',
align: 'center',
dataIndex: 'sharedPath',
scopedSlots: { customRender: 'fileSlot' },
},
{
title: '新版本开发者',
align: 'center',
dataIndex: 'userId_dictText',
},
{
title: '新版本tool源码',
align: 'center',
dataIndex: 'sourceAddress',
},
{
title: '新版本需求文档',
align: 'center',
dataIndex: 'requirementsDocument',
scopedSlots: { customRender: 'fileSlot' },
},
{
title: '新版本操作手册',
align: 'center',
dataIndex: 'operationManual',
scopedSlots: { customRender: 'fileSlot' },
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 147,
scopedSlots: { customRender: 'action' },
},
],
url: {
list: '/to/toVersion/list',
delete: '/to/toVersion/delete',
deleteBatch: '/to/toVersion/deleteBatch',
exportXlsUrl: '/to/toVersion/exportXls',
importExcelUrl: 'to/toVersion/importExcel',
},
dictOptions: {},
superFieldList: [],
}
},
created() {
this.getSuperFieldList()
},
activated() {
this.toVersionList()
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
},
},
methods: {
toolIdAdd(){
console.log("toolIds========="+this.toolIds)
this.$refs.modalForm.toolidadd(this.toolIds);
this.$refs.modalForm.title = '新增';
this.$refs.modalForm.disableSubmit = false;
},
toVersionList() {
this.paramsVesion = this.$route.query.record //映入事件参数
console.log('++++++this.paramsVesion' + this.paramsVesion)
if (typeof this.paramsVesion == 'undefined') {
return
}
var vesionId = this.paramsVesion.id //获取id
this.toolIds=vesionId,
console.log('++++++vesionId' + vesionId)
//将id赋值给管理表的toolId
var param = {
toolId: vesionId,
}
console.log('++++++toolId' + param)
toVersionList(param).then((res) => {
if (res.success) {
this.dataSource = res.result.records
this.ipagination.total = res.result.total
}
})
},
toVersionAdd() {
this.paramsVesion = this.$route.query.record //映入事件参数
console.log('++++++this.paramsVesion' + this.paramsVesion)
var vesionId = this.paramsVesion.id //获取id
console.log('++++++vesionId' + vesionId)
//将id赋值给管理表的toolId
var param = {
toolId: vesionId,
}
console.log('++++++toolId' + param)
toVersionAdd(param).then((res) => {
if (res.success) {
this.dataSource = res.result.records
this.ipagination.total = res.result.total
}
})
},
initDictConfig() {},
getSuperFieldList() {
fieldList.push({ type: 'string', value: 'fieldOne', text: 'fieldOne', dictCode: '' })
fieldList.push({ type: 'string', value: 'toolId', text: 'toolId', dictCode: '' })
fieldList.push({ type: 'string', value: 'versionNumber', text: '版本号', dictCode: '' })
fieldList.push({ type: 'string', value: 'updateReason', text: '版本更新原因', dictCode: '' })
fieldList.push({ type: 'string', value: 'functionDescription', text: '新版本功能描述', dictCode: '' })
fieldList.push({ type: 'string', value: 'toolType', text: '新工具类型', dictCode: 'tool_type' })
fieldList.push({ type: 'string', value: 'urlLink', text: 'URLlink地址', dictCode: '' })
fieldList.push({ type: 'string', value: 'sharedPath', text: '共享路径地址', dictCode: '' })
fieldList.push({ type: 'sel_user', value: 'userId', text: '新版本开发者' })
fieldList.push({ type: 'string', value: 'sourceAddress', text: '新版本tool源码', dictCode: '' })
fieldList.push({ type: 'string', value: 'requirementsDocument', text: '新版本需求文档', dictCode: '' })
fieldList.push({ type: 'string', value: 'operationManual', text: '新版本操作手册', dictCode: '' })
this.superFieldList = fieldList
},
},
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
form
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form :form="form" slot="detail">
<a-row>
<a-col :span="24">
<a-form-item label="toolId" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['toolId']" placeholder="请输入toolId"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['versionNumber']" placeholder="请输入版本号"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="版本更新原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea v-decorator="['updateReason']" rows="4" placeholder="请输入版本更新原因" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="新版本功能描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-editor v-decorator="['functionDescription', { trigger: 'input' }]" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="新工具类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
type="list"
v-decorator="['toolType']"
:trigger-change="true"
dictCode="tool_type"
placeholder="请选择新工具类型"
/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="URLlink地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['urlLink']" placeholder="请输入URLlink地址"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="共享路径地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['sharedPath']" :trigger-change="true"></j-upload>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="新版本开发者" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-select-user-by-dep v-decorator="['userId']" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="新版本tool源码" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['sourceAddress']" placeholder="请输入新版本tool源码"></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="新版本需求文档" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['requirementsDocument']" :trigger-change="true"></j-upload>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="新版本操作手册" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['operationManual']" :trigger-change="true"></j-upload>
</a-form-item>
</a-col>
<a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
<a-button @click="submitForm">提 交</a-button>
</a-col>
</a-row>
</a-form>
</j-form-container>
</a-spin>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JUpload from '@/components/jeecg/JUpload'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JEditor from '@/components/jeecg/JEditor'
export default {
name: 'ToVersionForm',
components: {
JFormContainer,
JUpload,
JSelectUserByDep,
JDictSelectTag,
JEditor,
},
props: {
//流程表单data
formData: {
type: Object,
default: () => {},
required: false,
},
//表单模式:true流程表单 false普通表单
formBpm: {
type: Boolean,
default: false,
required: false,
},
//表单禁用
disabled: {
type: Boolean,
default: false,
required: false,
},
},
data() {
return {
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {},
url: {
add: '/to/toVersion/add',
edit: '/to/toVersion/edit',
queryById: '/to/toVersion/queryById',
},
}
},
computed: {
formDisabled() {
if (this.formBpm === true) {
if (this.formData.disabled === false) {
return false
}
return true
}
return this.disabled
},
showFlowSubmitButton() {
if (this.formBpm === true) {
if (this.formData.disabled === false) {
return true
}
}
return false
},
},
created() {
//如果是流程中表单,则需要加载流程表单data
this.showFlowData()
},
methods: {
add() {
this.edit({})
},
toolidadd(toolIds) {
this.toolidedit({},toolIds)
},
toolidedit(record, toolIds) {
this.form.resetFields();
this.model = Object.assign({}, record)
this.visible = true
var modelid = {
toolId: toolIds,
versionNumber: this.model.versionNumber,
updateReason: this.model.updateReason,
functionDescription: this.model.functionDescription,
toolType: this.model.toolType,
urlLink: this.model.urlLink,
sharedPath: this.model.sharedPath,
userId: this.model.userId,
sourceAddress: this.model.sourceAddress,
requirementsDocument: this.model.requirementsDocument,
operationManual: this.model.operationManual,
}
this.$nextTick(() => {
this.form.setFieldsValue(
pick(
modelid,
'toolId',
'versionNumber',
'updateReason',
'functionDescription',
'toolType',
'urlLink',
'sharedPath',
'userId',
'sourceAddress',
'requirementsDocument',
'operationManual'
)
)
})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(
pick(
this.model,
'toolId',
'versionNumber',
'updateReason',
'functionDescription',
'toolType',
'urlLink',
'sharedPath',
'userId',
'sourceAddress',
'requirementsDocument',
'operationManual'
)
)
})
},
//渲染流程表单数据
showFlowData() {
if (this.formBpm === true) {
let params = { id: this.formData.dataId }
getAction(this.url.queryById, params).then((res) => {
if (res.success) {
this.edit(res.result)
}
})
}
},
submitForm() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
let formData = Object.assign(this.model, values)
console.log('表单提交数据', formData)
httpAction(httpurl, formData, method)
.then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
})
.finally(() => {
that.confirmLoading = false
})
}
})
},
popupCallback(row) {
this.form.setFieldsValue(
pick(
row,
'toolId',
'versionNumber',
'updateReason',
'functionDescription',
'toolType',
'urlLink',
'sharedPath',
'userId',
'sourceAddress',
'requirementsDocument',
'operationManual'
)
)
},
},
}
</script>
modal
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
@cancel="handleCancel"
cancelText="关闭"
>
<to-version-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></to-version-form>
</j-modal>
</template>
<script>
import ToVersionForm from './ToVersionForm'
export default {
name: 'ToVersionModal',
components: {
ToVersionForm,
},
data() {
return {
title: '',
width: 800,
visible: false,
disableSubmit: false,
}
},
methods: {
toolidadd(toolIds) {
this.visible = true
this.$nextTick(() => {
this.$refs.realForm.toolidadd(toolIds)
})
},
add() {
this.visible = true
this.$nextTick(() => {
this.$refs.realForm.add()
})
},
edit(record) {
this.visible = true
this.$nextTick(() => {
this.$refs.realForm.edit(record)
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
this.$refs.realForm.submitForm()
},
submitCallback() {
this.$emit('ok')
this.visible = false
},
handleCancel() {
this.close()
},
},
}
</script>