流程
1.list页面
1.1详情按钮绑定事件
<a @click="xiangqing(record)">详情</a>
1.2 methods写入事件
methods: {
xiangqing(record) {
this.$refs.xiangqingModal.edit(record);
this.$refs.xiangqingModal.title="详情";
this.$refs.xiangqingModal.disableSubmit = true;
},
1.3 引入modal
<xiang-qing-modal ref="xiangqingModal" @ok="modalFormOk"></xiang-qing-modal>
import XiangQingModal from './modules/XiangQingModal'
components：{
XiangQingModal
}
2.modal页
2.1 引入form页面
<xiang-qing-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></xiang-qing-form>
import XiangQingForm from './XiangQingForm'
components: {
XiangQingForm,
},
3.from页
写入要显示的内容
源码
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="Tool名称">
<a-input placeholder="请输入Tool名称" v-model="queryParam.name"></a-input>
</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.introduction"></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="站点">
<j-dict-select-tag placeholder="请选择站点" v-model="queryParam.site" dictCode="site" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="部门">
<j-select-depart placeholder="请选择部门(一级)" v-model="queryParam.depId" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="Tool实现方式">
<j-dict-select-tag placeholder="请选择Tool实现方式" v-model="queryParam.achieve" dictCode="achieve" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="Tool关联应用">
<j-dict-select-tag placeholder="请选择Tool 关联应用" v-model="queryParam.related" dictCode="related" />
</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.features"></a-input>
</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.purpose"></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.developerId" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="IT负责/联系人">
<j-select-user-by-dep placeholder="请选择IT 负责/联系人" v-model="queryParam.itUser" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="IT负责/联系人lync">
<a-input placeholder="请输入IT 负责/联系人lync" v-model="queryParam.itEmail"></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.businessUser" />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="业务负责/联系人lnyc">
<a-input placeholder="请输入业务负责/联系人lnyc" v-model="queryParam.businessEmail"></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.businessType"
dictCode="business_type"
/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="DataSource/Platform(可多选)">
<j-dict-select-tag
placeholder="请选择Data Source/Platform(可多选)"
v-model="queryParam.platform"
dictCode="platform"
/>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="Tool类型">
<j-dict-select-tag placeholder="请选择Tool类型" 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="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="Tool关联ROI No">
<a-input placeholder="请输入Tool 关联ROI No" v-model="queryParam.roiNo"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="Tool上线时间">
<j-date placeholder="请选择Tool上线时间" v-model="queryParam.onlineTime"></j-date>
</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 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="xiangqing(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a @click="managerVersion(record)">版本管理</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定收藏吗?" @confirm="() => avorites(record)">
<a>收藏</a>
</a-popconfirm>
</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-tools-modal ref="modalForm" @ok="modalFormOk"></to-tools-modal>
<xiang-qing-modal ref="xiangqingModal" @ok="modalFormOk"></xiang-qing-modal>
</a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ToToolsModal from './modules/ToToolsModal'
import XiangQingModal from './modules/XiangQingModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JDate from '@/components/jeecg/JDate.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
import { avoritesAdd } from '@/api/api'
export default {
name: 'ToToolsList',
mixins: [JeecgListMixin, mixinDevice],
components: {
JDictSelectTag,
JDate,
JSelectUserByDep,
JSelectDepart,
ToToolsModal,
XiangQingModal,
JSuperQuery,
avoritesAdd
},
data() {
return {
description: 'Tool基本信息表管理页面',
indexStyle: '',
record: [],
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
},
},
{
title: '图标',
align: 'center',
dataIndex: 'icon',
scopedSlots: { customRender: 'imgSlot' },
},
{
title: 'Tool名称',
align: 'center',
dataIndex: 'name',
},
{
title: 'Tool简介',
align: 'center',
dataIndex: 'introduction',
},
{
title: '站点',
align: 'center',
dataIndex: 'site_dictText',
},
{
title: '部门(一级)',
align: 'center',
dataIndex: 'depId_dictText',
},
{
title: 'Tool实现方式',
align: 'center',
dataIndex: 'achieve_dictText',
},
{
title: 'Tool 关联应用',
align: 'center',
dataIndex: 'related_dictText',
},
{
title: 'Tool功能描述',
align: 'center',
dataIndex: 'features',
},
{
title: 'Tool 目的',
align: 'center',
dataIndex: 'purpose',
scopedSlots: { customRender: 'htmlSlot' },
},
{
title: '开发者',
align: 'center',
dataIndex: 'developerId_dictText',
},
{
title: 'IT 负责/联系人',
align: 'center',
dataIndex: 'itUser_dictText',
},
{
title: 'IT 负责/联系人lync',
align: 'center',
dataIndex: 'itEmail',
},
{
title: '业务负责/联系人',
align: 'center',
dataIndex: 'businessUser_dictText',
},
{
title: '业务负责/联系人lnyc',
align: 'center',
dataIndex: 'businessEmail',
},
{
title: '代表照片群',
align: 'center',
dataIndex: 'image',
scopedSlots: { customRender: 'imgSlot' },
},
{
title: '业务类型(可多选)',
align: 'center',
dataIndex: 'businessType_dictText',
},
{
title: 'Data Source/Platform(可多选)',
align: 'center',
dataIndex: 'platform_dictText',
},
{
title: 'Tool 需求文档',
align: 'center',
dataIndex: 'requirementsDocument',
scopedSlots: { customRender: 'fileSlot' },
},
{
title: '用户操作手册',
align: 'center',
dataIndex: 'operationManual',
scopedSlots: { customRender: 'fileSlot' },
},
{
title: 'Tool类型',
align: 'center',
dataIndex: 'toolType_dictText',
},
{
title: 'URLlink地址',
align: 'center',
dataIndex: 'urlLink',
},
{
title: '共享路径地址',
align: 'center',
dataIndex: 'sharedPath',
scopedSlots: { customRender: 'fileSlot' },
},
{
title: 'Tool 源码地址',
align: 'center',
dataIndex: 'sourceAddress',
},
{
title: 'Tool 关联ROI No',
align: 'center',
dataIndex: 'roiNo',
},
{
title: 'Tool上线时间',
align: 'center',
dataIndex: 'onlineTime',
customRender: function (text) {
return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
},
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 147,
scopedSlots: { customRender: 'action' },
},
],
url: {
list: '/to/toTools/list',
list2: '/to/toVersion/list',
delete: '/to/toTools/delete',
deleteBatch: '/to/toTools/deleteBatch',
exportXlsUrl: '/to/toTools/exportXls',
importExcelUrl: 'to/toTools/importExcel',
},
dictOptions: {},
superFieldList: [],
}
},
created() {
this.getSuperFieldList()
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
},
},
methods: {
xiangqing(record) {
this.$refs.xiangqingModal.edit(record);
this.$refs.xiangqingModal.title="详情";
this.$refs.xiangqingModal.disableSubmit = true;
},
initDictConfig() {},
getSuperFieldList() {
let fieldList = []
fieldList.push({ type: 'string', value: 'icon', text: '图标', dictCode: '' })
fieldList.push({ type: 'string', value: 'name', text: 'Tool名称', dictCode: '' })
fieldList.push({ type: 'string', value: 'introduction', text: 'Tool简介', dictCode: '' })
fieldList.push({ type: 'string', value: 'site', text: '站点', dictCode: 'site' })
fieldList.push({ type: 'sel_depart', value: 'depId', text: '部门(一级)' })
fieldList.push({ type: 'string', value: 'achieve', text: 'Tool实现方式', dictCode: 'achieve' })
fieldList.push({ type: 'string', value: 'related', text: 'Tool 关联应用', dictCode: 'related' })
fieldList.push({ type: 'string', value: 'features', text: 'Tool功能描述', dictCode: '' })
fieldList.push({ type: 'string', value: 'purpose', text: 'Tool 目的', dictCode: '' })
fieldList.push({ type: 'sel_user', value: 'developerId', text: '开发者' })
fieldList.push({ type: 'sel_user', value: 'itUser', text: 'IT 负责/联系人' })
fieldList.push({ type: 'string', value: 'itEmail', text: 'IT 负责/联系人lync', dictCode: '' })
fieldList.push({ type: 'sel_user', value: 'businessUser', text: '业务负责/联系人' })
fieldList.push({ type: 'string', value: 'businessEmail', text: '业务负责/联系人lnyc', dictCode: '' })
fieldList.push({ type: 'Text', value: 'image', text: '代表照片群', dictCode: '' })
fieldList.push({ type: 'string', value: 'businessType', text: '业务类型(可多选)', dictCode: 'business_type' })
fieldList.push({ type: 'string', value: 'platform', text: 'Data Source/Platform(可多选)', dictCode: 'platform' })
fieldList.push({ type: 'string', value: 'requirementsDocument', text: 'Tool 需求文档', dictCode: '' })
fieldList.push({ type: 'string', value: 'operationManual', text: '用户操作手册', dictCode: '' })
fieldList.push({ type: 'string', value: 'toolType', text: 'Tool类型', dictCode: 'tool_type' })
fieldList.push({ type: 'string', value: 'urlLink', text: 'URLlink地址', dictCode: '' })
fieldList.push({ type: 'string', value: 'sharedPath', text: '共享路径地址', dictCode: '' })
fieldList.push({ type: 'string', value: 'sourceAddress', text: 'Tool 源码地址', dictCode: '' })
fieldList.push({ type: 'string', value: 'roiNo', text: 'Tool 关联ROI No', dictCode: '' })
fieldList.push({ type: 'date', value: 'onlineTime', text: 'Tool上线时间' })
fieldList.push({ type: 'string', value: 'versionNumber', text: 'Tool版本号', dictCode: '' })
this.superFieldList = fieldList
},
managerVersion(record) {
console.log('你好' + JSON.stringify(record))
this.$router.push({
path: '/store/ToVersionList',
query: {
record: record,
},
})
},
avorites(record) {
this.model = record
console.log('++++++this.model=======' + this.model)
var avoritesId = this.model.id
console.log('avoritesId++++++++' + avoritesId)
var params = {
toolId: avoritesId,
}
console.log('params++++++++' + params)
avoritesAdd(params).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.loading = false
that.loadData()
} else {
that.$message.error(res.message)
that.loading = false
}
})
this.$router.push({
path: '/store/ToAvoritesList',
query: {
record: record,
},
})
},
},
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
modal
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
@cancel="handleCancel"
cancelText="关闭"
>
<xiang-qing-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></xiang-qing-form>
</j-modal>
</template>
<script>
import ToToolsForm from './ToToolsForm'
import XiangQingForm from './XiangQingForm'
export default {
name: 'ToToolsModal',
components: {
ToToolsForm,
XiangQingForm,
},
data() {
return {
title: '',
width: 800,
visible: false,
disableSubmit: false,
}
},
methods: {
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>
form
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form :form="form" slot="detail">
<a-row>
<!-- 一列 -->
<a-col :span="8">
<!-- 排头数字 -->
<div class="ant-steps-item-icon">
<span class="ant-steps-icon">1</span>
</div>
<a-col :span="24">
<div style="height: 33px"></div>
</a-col>
<a-form-item label="图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-image-upload isMultiple v-decorator="['icon']"></j-image-upload>
</a-form-item>
<a-form-item label="Tool名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['name']" placeholder="请输入Tool名称"></a-input>
</a-form-item>
<a-form-item label="Tool简介" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['introduction']" placeholder="请输入Tool简介"></a-input>
</a-form-item>
<a-form-item label="Tool功能描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea v-decorator="['features']" rows="4" placeholder="请输入Tool功能描述" />
</a-form-item>
<a-form-item label="Tool 目的" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-editor v-decorator="['purpose', { trigger: 'input' }]" />
</a-form-item>
</a-col>
<!-- 二列 -->
<a-col :span="8">
<!-- 排头数字 -->
<div class="ant-steps-item-icon">
<span class="ant-steps-icon">2</span>
</div>
<!-- 行间距 -->
<a-col :span="24">
<div style="height: 33px"></div>
</a-col>
<a-form-item label="站点" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
type="list"
v-decorator="['site']"
:trigger-change="true"
dictCode="site"
placeholder="请选择站点"
/>
</a-form-item>
<a-form-item label="部门(一级)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-select-depart v-decorator="['depId']" multi />
</a-form-item>
<a-form-item label="开发者" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-select-user-by-dep v-decorator="['developerId']" />
</a-form-item>
<a-form-item label="IT 负责/联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-select-user-by-dep v-decorator="['itUser']" />
</a-form-item>
<a-form-item label="业务负责/联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-select-user-by-dep v-decorator="['businessUser']" />
</a-form-item>
</a-col>
<!-- 三列 -->
<a-col :span="8">
<!-- 排头数 -->
<div class="ant-steps-item-icon">
<span class="ant-steps-icon">3</span>
</div>
<!-- 行间距 -->
<a-col :span="24">
<div style="height: 33px"></div>
</a-col>
<a-form-item label="Tool类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
type="list"
v-decorator="['toolType']"
:trigger-change="true"
dictCode="tool_type"
placeholder="请选择Tool类型"
/>
</a-form-item>
<a-form-item label="URLlink地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['urlLink']" placeholder="请输入URLlink地址"></a-input>
</a-form-item>
<a-form-item label="共享路径地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['sharedPath']" :trigger-change="true"></j-upload>
</a-form-item>
<a-form-item label="Tool实现方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
type="list"
v-decorator="['achieve']"
:trigger-change="true"
dictCode="achieve"
placeholder="请选择Tool实现方式"
/>
</a-form-item>
<a-form-item label="Tool 关联应用" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-dict-select-tag
type="list"
v-decorator="['related']"
:trigger-change="true"
dictCode="related"
placeholder="请选择Tool 关联应用"
/>
</a-form-item>
<a-form-item label="业务类型(可多选)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-multi-select-tag
type="checkbox"
v-decorator="['businessType']"
:trigger-change="true"
dictCode="business_type"
placeholder="请选择业务类型(可多选)"
/>
</a-form-item>
<a-form-item label="Data Source/Platform(可多选)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-multi-select-tag
type="checkbox"
v-decorator="['platform']"
:trigger-change="true"
dictCode="platform"
placeholder="请选择Data Source/Platform(可多选)"
/>
</a-form-item>
<a-form-item label="Tool 源码地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['sourceAddress']" placeholder="请输入Tool 源码地址"></a-input>
</a-form-item>
<a-form-item label="Tool 关联ROI No" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['roiNo']" placeholder="请输入Tool 关联ROI No"></a-input>
</a-form-item>
<a-form-item label="代表照片群" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-image-upload isMultiple v-decorator="['image']"></j-image-upload>
</a-form-item>
<a-form-item label="Tool 需求文档" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['requirementsDocument']" :trigger-change="true"></j-upload>
</a-form-item>
<a-form-item label="用户操作手册" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-upload v-decorator="['operationManual']" :trigger-change="true"></j-upload>
</a-form-item>
<a-form-item label="Tool上线时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-date
placeholder="请选择Tool上线时间"
v-decorator="['onlineTime']"
:trigger-change="true"
style="width: 100%"
/>
</a-form-item>
<a-form-item label="Tool版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input v-decorator="['versionNumber']" placeholder="请输入Tool版本号"></a-input>
</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 JDate from '@/components/jeecg/JDate'
import JUpload from '@/components/jeecg/JUpload'
import JImageUpload from '@/components/jeecg/JImageUpload'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import JEditor from '@/components/jeecg/JEditor'
import ImagPreview from '../../jeecg/ImagPreview.vue'
export default {
name: 'ToToolsForm',
components: {
JFormContainer,
JDate,
JUpload,
JImageUpload,
JSelectDepart,
JSelectUserByDep,
JDictSelectTag,
JMultiSelectTag,
JEditor,
},
props: {
formData: {
type: Object,
default: () => {},
required: 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/toTools/add',
edit: '/to/toTools/edit',
queryById: '/to/toTools/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() {
this.showFlowData()
},
methods: {
add() {
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(
pick(
this.model,
'icon',
'name',
'introduction',
'site',
'depId',
'achieve',
'related',
'features',
'purpose',
'developerId',
'itUser',
'itEmail',
'businessUser',
'businessEmail',
'image',
'businessType',
'platform',
'requirementsDocument',
'operationManual',
'toolType',
'urlLink',
'sharedPath',
'sourceAddress',
'roiNo',
'onlineTime',
'versionNumber'
)
)
})
},
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,
'icon',
'name',
'introduction',
'site',
'depId',
'achieve',
'related',
'features',
'purpose',
'developerId',
'itUser',
'itEmail',
'businessUser',
'businessEmail',
'image',
'businessType',
'platform',
'requirementsDocument',
'operationManual',
'toolType',
'urlLink',
'sharedPath',
'sourceAddress',
'roiNo',
'onlineTime',
'versionNumber'
)
)
},
},
}
</script>
630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
