Commit 87c6d146 by liangzhen

登陆页面

1 parent 2efc3573
Showing with 33 additions and 4843 deletions
...@@ -4,6 +4,7 @@ import Main from "@/views/Main"; ...@@ -4,6 +4,7 @@ import Main from "@/views/Main";
Vue.use(VueRouter); Vue.use(VueRouter);
// 解决elementUI导航栏中的vue-router在3.0版本以上重复点击菜单报错的问题 ### // 解决elementUI导航栏中的vue-router在3.0版本以上重复点击菜单报错的问题 ###
const originalPush = VueRouter.prototype.push; const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) { VueRouter.prototype.push = function push(location) {
...@@ -19,6 +20,11 @@ VueRouter.prototype.push = function push(location) { ...@@ -19,6 +20,11 @@ VueRouter.prototype.push = function push(location) {
*/ */
export const routes = [ export const routes = [
{ {
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: "/", path: "/",
name: "home", name: "home",
redirect: "/main", redirect: "/main",
...@@ -93,14 +99,6 @@ export const routes = [ ...@@ -93,14 +99,6 @@ export const routes = [
}, },
}, },
{ {
path: "/main/doc-demo", //在线文档编制
name: "doc-demo",
component: () => import("@/views/docDemo/index.vue"),
meta: {
title: "demo",
},
},
{
path: "/main/metaModelList", //元模型管理 path: "/main/metaModelList", //元模型管理
name: "metaModelList", name: "metaModelList",
component: () => import("@/views/meta-model-list/index.vue"), component: () => import("@/views/meta-model-list/index.vue"),
...@@ -151,23 +149,7 @@ export const routes = [ ...@@ -151,23 +149,7 @@ export const routes = [
title: "总体架构资产文档库", title: "总体架构资产文档库",
}, },
}, },
{
path: "/main/etp-Manage", //专家人才库
name: "etp-Manage",
component: () => import("@/views/etpManage/index.vue"),
meta: {
title: "专家人才库",
},
},
{
path: "/main/reportTemplateRelativeUse", //报告模板关联使用
name: "reportTemplateRelativeUse",
component: () =>
import("@/views/report-template-relative-use/index.vue"),
meta: {
title: "报告模板关联使用",
},
},
{ {
path: "/main/archiViewManage", //架构视图管理 path: "/main/archiViewManage", //架构视图管理
name: "archiViewManage", name: "archiViewManage",
...@@ -195,31 +177,6 @@ export const routes = [ ...@@ -195,31 +177,6 @@ export const routes = [
}, },
}, },
// {
// path: "/main/comCenterServeListOld/", //企业中台服务清单
// name: "comCenterServeList",
// component: () => import("@/views/comCenterServeList/index.vue"),
// meta: {
// title: "企业中台服务清单",
// },
// },
{
path: "/main/comCenterServeList/", //企业中台服务清单
name: "comCenterServeList",
component: () => import("@/views/comCenterServeListNew/index.vue"),
meta: {
title: "企业中台服务清单",
},
},
{
path: "/main/currentAssetsList", //现状架构资产管理
name: "currentAssetsList",
// component: () => import('@/views/current-assets-list/index.vue'),
component: () => import("@/views/busi-assets-list/index.vue"),
meta: {
title: "现状架构资产管理",
},
},
{ {
path: "/main/logManage", //日志管理 path: "/main/logManage", //日志管理
name: "logManage", name: "logManage",
...@@ -262,15 +219,6 @@ export const routes = [ ...@@ -262,15 +219,6 @@ export const routes = [
component: () => import("@/views/systemArchiViewDesign/details.vue"), component: () => import("@/views/systemArchiViewDesign/details.vue"),
}, },
{ {
path: "/main/documentEdit", //文档编辑
name: "documentEdit",
meta: {
showGoBack: true,
title: "文档编辑",
},
component: () => import("@/views/documentEdit/index.vue"),
},
{
path: "/main/summaryArchiDesign", //概设阶段视图设计 path: "/main/summaryArchiDesign", //概设阶段视图设计
name: "summaryArchiDesign", name: "summaryArchiDesign",
component: () => import("@/views/summaryArchiDesign/index.vue"), component: () => import("@/views/summaryArchiDesign/index.vue"),
...@@ -356,74 +304,6 @@ export const routes = [ ...@@ -356,74 +304,6 @@ export const routes = [
component: () => import("@/views/reviewArchiPoliticeCheck/details.vue"), component: () => import("@/views/reviewArchiPoliticeCheck/details.vue"),
}, },
{ {
path: "/main/batchPlanManagement", //批次计划管理
name: "batchPlanManagement",
component: () => import("@/views/batchPlanManagement/index.vue"),
meta: {
title: "批次计划管理",
keepAlive: true,
},
},
{
path: "/main/conceptualReview", // 概设材料审查列表
name: "conceptualReview",
component: () => import("@/views/conceptualReview/index.vue"),
meta: {
title: "概设材料审查",
},
},
{
path: "/main/conceptualExamine", // 概设材料审查页面
name: "conceptualExamine",
meta: {
showGoBack: true,
title: "概设材料审查详情",
},
component: () => import("@/views/conceptualReview/Examine.vue"),
},
{
path: "/main/demandManagement", // 需求管理列表页
name: "demandManagement",
component: () => import("@/views/demandManagement/index.vue"),
meta: {
title: "需求管理",
keepAlive: true,
},
},
{
path: "/main/conceptualViewOrg", // 概设材料意见编制
name: "conceptualViewOrg",
component: () => import("@/views/conceptualViewOrg/index.vue"),
meta: {
title: "概设材料意见编制",
},
},
{
path: "/main/conceptualBaseManagement", // 概设评审基础管理
name: "conceptualBaseManagement",
component: () => import("@/views/conceptualBaseManagement/index.vue"),
meta: {
title: "概设评审基础管理",
},
},
{
path: "/main/onlineReview", // 评审意见编制- 在线辅助审核
name: "onlineReview",
meta: {
showGoBack: true,
title: "在线辅助审核",
},
component: () => import("@/views/conceptualViewOrg/OnlineReview.vue"),
},
{
path: "/main/conceptualRelated", // 概设关联业务管理
name: "conceptualRelated",
component: () => import("@/views/conceptualRelated/index.vue"),
meta: {
title: "概设关联业务管理",
},
},
{
path: "/main/supervisionNotifyManagement", // 架构督查督查通报管理 path: "/main/supervisionNotifyManagement", // 架构督查督查通报管理
name: "supervisionNotifyManagement", name: "supervisionNotifyManagement",
component: () => component: () =>
...@@ -441,48 +321,6 @@ export const routes = [ ...@@ -441,48 +321,6 @@ export const routes = [
}, },
}, },
{
path: "/main/artPolicyExamine", // 架构督查-技术政策审查
name: "artPolicyExamine",
component: () => import("@/views/artPolicyExamine/index.vue"),
meta: {
title: "技术政策审查",
},
},
{
path: "/main/collectDataConfiguration", // 架构督查 - 收集资料配置
name: "collectDataConfiguration",
component: () => import("@/views/collectDataConfiguration/index.vue"),
meta: {
title: "收集资料配置",
},
},
{
path: "/main/supervisionDataCollection", // 架构督查 - 督查资料收集
name: "supervisionDataCollection",
component: () => import("@/views/supervisionDataCollection/index.vue"),
meta: {
title: "督查资料收集",
},
},
{
path: "/main/examine", // 架构督查 - 架构督查分析
name: "examine",
component: () => import("@/views/artPolicyExamine/Examine.vue"),
meta: {
title: "架构督查分析",
},
},
{
path: "/main/dictionaryManagement", // 系统管理 - 字典管理
name: "dictionaryManagement",
component: () => import("@/views/dictionaryManagement/index.vue"),
meta: {
title: "字典管理",
},
},
{ {
path: "/main/organizationManagement", // 系统管理 - 组织机构管理 path: "/main/organizationManagement", // 系统管理 - 组织机构管理
name: "organizationManagement", name: "organizationManagement",
......
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/**
* 校验手机号
* ***/
export function validMobile(str) {
return /^1[3-9]\d{9}$/.test(str)
}
<template>
<el-dialog
:title="'指标清单'"
:visible.sync="showDialog"
width="90%"
@close="showDialog = false"
@open="handleOpen"
>
<el-form :inline="true" id="addForm" ref="addForm" :model="formInfo" label-width="auto" style="text-align: left;">
<el-form-item label="政策名称" prop="policyName">
<el-input v-model="formInfo.policyName" size="small" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="" prop="">
<el-button type="primary" @click="querySearch" size="mini">查询</el-button>
</el-form-item>
</el-form>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
@selection-change="selectionChange"
>
</table-config>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSubmit" size="mini">保 存</el-button>
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
import TableConfig from '@/views/collectDataConfiguration/TableConfig.vue'
import {artPolicyExamineAdd} from '@/api/architectureInspection'
import {getDictTypeOptions} from "@/utils";
export default {
components: {TableConfig},
props: {
title: {
type: String,
default: '',
},
prjCodeDetail: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
computed: {
columns() {
let arr = [
{type: 'selection', prop: 'selection', width: '55px'},
{label: '序号', type: 'index', width: '80px'},
{label: '政策名称', prop: 'policyName', width: '100px'},
{label: '政策描述', prop: 'policyContent',},
{
label: '适用范围',
prop: 'scope',
options: this.sysBuildOrgOptions,
collectionType: true,
width: '300px',
},
{label: '发布部门', prop: 'deptName',},
{label: '级别', prop: 'level',},
{label: '启用时间', prop: 'startTime',},
{label: '创建时间', prop: 'createTime',},
]
return arr
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
}
},
data() {
return {
formInfo: {
policyName: '',
},
query: {
url: artPolicyExamineAdd,
method: 'post',
queryParam: {
policyName: '',
state: '1'
},
},
selectId: '',
sysBuildOrgOptions: [],
}
},
created() {
this.getDicts();
},
methods: {
getDicts() {
getDictTypeOptions('tech_policy_scope').then((res) => {
this.sysBuildOrgOptions = res
})
},
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.query.queryParam.policyName = this.forEach.policyName
this.$refs.searchTable.queryData()
},
selectionChange(data) {
let idArr = []
data.forEach(item => {
idArr.push(item.policyCode)
})
this.selectId = idArr.join(',')
},
handleSubmit() {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
this.$postRequest('/klTechPolicyCheck/ad/', {policyCode: this.selectId, state: '1'}).then(res => {
if (res.code === 200) {
loading.close()
this.$message.success('保存成功')
this.handleClose()
this.$emit('querySearch')
}
})
},
handleClose() {
this.showDialog = false
},
async handleOpen() {
this.$nextTick(() => {
this.$refs.searchTable.clearSelection()
})
},
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/elementui.scss';
::v-deep .el-dialog__body {
height: 58vh;
}
</style>
\ No newline at end of file
<template>
<div class="tab-component flex-column h-100 searchTable">
<div class="content flex">
<div class="left_container m-r-10 flex-column">
<div class="left_container_title">
<i class="el-icon-caret-right icon"></i>
<span>评审标准</span>
</div>
<div class="left_container_content flex-1">
<div class="office w-100 h-100">
<vab-only-office
id="office-preview-tab1-1"
:documentServerUrl="documentServerUrl"
v-bind="readonlyConfig"
/>
</div>
</div>
</div>
<div class="right_container flex-column">
<div class="right_container_title flex-b-c">
<div class="flex">
<i class="el-icon-caret-right icon"></i>
<span>评审内容</span>
</div>
<el-select class="select-title" v-model="select">
<el-option label="概要设计说明书.doc" value="1"></el-option>
</el-select>
<el-button
type="primary"
size="mini"
class="backBtn"
@click="backRoute"
>返回</el-button
>
</div>
<div class="right_container_content flex-1">
<div class="office w-100 h-100">
<vab-only-office
id="office-preview-tab1-2"
:documentServerUrl="documentServerUrl"
v-bind="config"
/>
</div>
</div>
</div>
</div>
<div class="bottom_container">
<div class="flex-b-c p-r-20 m-tb-15">
<div class="flex-c">
<span class="m-r-50 p-l-20 bottom_container_title">评审结果</span>
<div class="label m-r-10">是否满足接入要求:</div>
<el-select v-model="isMeet" class="leftSelect">
<el-option
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<el-button type="primary" size="medium" @click="handleSave"
>保存结果</el-button
>
</div>
<el-input
type="textarea"
:rows="4"
v-model="resultContent"
v-no-backslash
class="w-100"
placeholder="请输入"
></el-input>
</div>
</div>
</template>
<script>
import vabOnlyOffice from '@/components/onlyOffice/index.vue'
import {
saveReviewArchiFollowCheckRightSuggestion,
queryReviewArchiFollowCheckRightSuggestionDetails,
} from '@/api/index.js'
import { documentServerUrl2 } from '@/config'
export default {
name: 'tab1',
components: { vabOnlyOffice },
data() {
return {
resultContent: '',
isMeet: null,
selectOptions: [
{
label: '是',
value: 1,
},
{
label: '否',
value: 0,
},
],
select: '1',
documentServerUrl: documentServerUrl2,
config: {
document_fileType: 'docx',
document_title: '概要设计说明书.docx',
documentType: 'word',
fileId: '',
},
}
},
computed: {
readonlyConfig() {
return {
...this.config,
mode: 'view',
}
},
},
created() {
this.getDetail()
},
methods: {
getDetail() {
const params = {
reviewEnum: 'OPERATIONAL_SAFETY_COMPLIANCE_REVIEW',
prjId: this.$route.query.prjId,
}
queryReviewArchiFollowCheckRightSuggestionDetails(params).then((res) => {
if (res.code === 200) {
this.resultContent = res.data.reviewSuggestion
this.isMeet = res.data.reviewState
}
})
},
handleSave() {
const params = {
reviewEnum: 'OPERATIONAL_SAFETY_COMPLIANCE_REVIEW',
prjId: this.$route.query.prjId,
reviewState: this.isMeet,
reviewSuggestion: this.resultContent,
}
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
saveReviewArchiFollowCheckRightSuggestion(params).then((res) => {
loading.close()
if (res.code == 200) {
this.$message.success('保存成功')
} else {
this.$message.error(res.msg)
}
})
},
backRoute() {
this.$router.push({
path: '/main/artPolicyExamine',
query: { activeName: '2' },
})
},
},
}
</script>
<style lang="scss" scoped>
@import '@/styles/common.scss';
@import '@/views/reviewArchiPoliticeCheck/index.scss';
.backBtn {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<template>
<div class="searchTable">
<list-page>
<template #tabWrap>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
:label="item.label"
:name="item.name"
v-for="item in tabOptions"
:key="item.name"
>
</el-tab-pane>
</el-tabs>
</template>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm
ref="SearchForm"
@onSearch="querySearch"
:form-options="formOptions"
/>
</template>
<!-- 中部操作按钮 -->
<template #operationWrap v-if="activeName == '1'">
<el-button
type="primary"
icon="el-icon-document-add"
plain
@click="fnAdd"
>添加
</el-button
>
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</list-page>
<AddTabelList
@querySearch="querySearch"
:visible.sync="visible"
:title="dialogTitle"
/>
</div>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/views/collectDataConfiguration/TableConfig.vue'
import AddTabelList from './AddTabelList.vue'
import {artPolicyExamine, examineSearch} from '@/api/architectureInspection'
import {getDictTypeOptions} from "@/utils";
import {buildType, prjPlanClass} from "@/utils/dictionary";
export default {
name: 'artPolicyExamine',
components: {ListPage, SearchForm, TableConfig, AddTabelList},
data() {
return {
selectRows: [],
query: {
url: this.$route.query.activeName ? examineSearch : artPolicyExamine,
method: 'post',
queryParam: {},
},
activeName: this.$route.query.activeName
? this.$route.query.activeName
: '1',
tabOptions: [
{label: '技术政策', name: '1'},
{label: '审查', name: '2'},
],
visible: false,
dialogTitle: '',
sysBuildOrgOptions: []
}
},
computed: {
formOptions() {
if (this.activeName == '2') {
return [
{
label: '项目名称', // label文字
prop: 'prjName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
} else {
return [
{
label: '政策名称', // label文字
prop: 'policyName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
}
},
columns() {
if (this.activeName == '2') {
return [
{label: '序号', type: 'index', width: '80px'},
{label: '单位', prop: 'manageOrgName', width: '200px'},
{label: '部门', prop: 'manageDeptName', width: '200px'},
{label: '系统名称', prop: 'appName'},
{
label: '建设类型',
width: '100px',
prop: 'buildType',
options: buildType,
collectionType: 'buildType',
},
{label: '项目名称', prop: 'prjName'},
{
label: '是否续建',
prop: 'prjPlanClass',
options: prjPlanClass,
collectionType: 'prjPlanClass',
},
{
label: '承建单位',
prop: 'buildOrg',
options: this.sysBuildOrgOptions,
collectionType: true,
width: '300px',
},
{label: '项目经理', prop: 'projectManager', width: '100px'},
{label: '创建时间', prop: 'createTime', width: '100px'},
{
label: '操作',
type: 'operation',
width: '200px',
actionButtons: [
{
title: '审查',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-view',
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
} else {
return [
{label: '序号', type: 'index', width: '80px'},
{label: '政策名称', prop: 'policyName', width: '100px'},
{label: '政策描述', prop: 'policyContent'},
{
label: '适用范围',
prop: 'scope',
options: this.sysBuildOrgOptions,
collectionType: true,
width: '300px',
},
{label: '发布部门', prop: 'deptName'},
{label: '级别', prop: 'level'},
{label: '启用时间', prop: 'startTime'},
{label: '创建时间', prop: 'createTime'},
{
label: '操作',
type: 'operation',
width: '200px',
actionButtons: [
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
}
},
},
created() {
this.getDicts()
},
methods: {
getDicts() {
getDictTypeOptions('tech_policy_scope').then((res) => {
this.sysBuildOrgOptions = res
});
getDictTypeOptions('build_company').then((res) => {
this.sysBuildOrgOptions = res
})
},
querySearch(data) {
if (this.activeName == '1') {
this.query.url = artPolicyExamine
this.query.queryParam = {
policyName: undefined,
}
} else {
this.query.url = examineSearch
this.query.queryParam = {
prjName: undefined,
}
}
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
fnAdd() {
this.visible = true
// this.rowData = {}
this.dialogTitle = '新增督查指标'
},
handleClick(tab, event) {
this.$refs.SearchForm.onReset()
// this.query.queryParam = {}
this.querySearch()
},
/**
* @description: 操作按钮
* @param {Object} row 当前操作行数据
* @param {String} title 当前操作按钮名称
* @author: pan
*/
fnOperation(row, title) {
switch (title) {
case '审查':
this.fnSubmit(row)
break
case '删除':
this.fnDel(row)
break
default:
break
}
},
fnSubmit(row) {
this.$router.push('/main/examine')
},
fnDel(row) {
this.$confirm('是否确认删除?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$postRequest('/klTechPolicyCheck/del/', {id: row.id}).then(
(res) => {
if (res.code === 200) {
this.$message.success('删除成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
},
)
})
.catch(() => {
})
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/common.scss';
</style>
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
@close="handleClose()"
@open="handleOpen"
>
<div>
<Form
ref="addForm"
:form-options="formOptions"
label-width="120px"
></Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取 消</el-button>
<el-button type="primary" @click="handleSubmit" v-if="this.title != '详情'"
>提 交</el-button
>
</span></el-dialog
>
</template>
<script>
import Form from '@/components/Form.vue'
import {addBatchPlan, editBatchPlan} from '@/api'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {
},
},
},
data() {
return {}
},
components: {
Form,
},
computed: {
formOptions() {
return [
{
label: '批次名称', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
rules: [{required: true, trigger: 'blur', message: '不能为空'}],
readonly: this.title == '详情' ? true : false,
},
// {
// label: '创建人', // label文字
// prop: 'createMan', // 字段名
// element: 'el-input', // 指定elementui组件
// initValue: '', // 字段初始值
// // placeholder: '请输入内容', // elementui组件属性
// readonly: true,
// },
{
label: '创建时间', // label文字
prop: 'createTime', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
placeholder: '请选择', // elementui组件属性
readonly: true,
},
{
label: '年度', // label文字
prop: 'year', // 字段名
type: 'year',
valueFormat: 'yyyy',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy'), // 字段初始值
placeholder: '请选择', // elementui组件属性
readonly: this.title == '详情' ? true : false,
},
{
label: '计划评审日期', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
readonly: this.title == '详情' ? true : false,
},
{
label: '备注', // label文字
prop: 'remark', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
readonly: this.title == '详情' ? true : false,
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
isEdit() {
if (this.title === '修改批次计划') {
return true
} else {
return false
}
},
},
mounted() {
},
methods: {
handleSubmit() {
this.$refs['addForm'].onValidate(() => {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
const formInfo = this.$refs['addForm'].getData()
const typeApi = this.isEdit ? editBatchPlan : addBatchPlan
const params = {
...this.rowData,
...formInfo,
state: 1,
}
typeApi(params).then((res) => {
loading.close()
if (res.code === 200) {
this.$message.success('保存成功')
this.showDialog = false
this.handleClose()
this.$emit('querySearch')
} else {
this.$message.error(res.msg)
}
})
})
},
handleClose() {
this.showDialog = false
this.formOptions.forEach((v) => {
if (v.prop === 'createTime') {
v.initValue = new Date().format('yyyy-MM-dd')
} else if (v.prop === 'year') {
v.initValue = new Date().format('yyyy')
} else {
v.initValue = ''
}
})
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
handleOpen() {
if (Object.keys(this.rowData).length) {
this.formOptions.forEach((v) => {
v.initValue = this.rowData[v.prop]
})
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
})
} else {
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
})
}
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="30%"
@close="handleClose()"
@open="handleOpen"
>
<div>
<template>
<el-radio v-model="radio" :label="3">同意</el-radio>
<el-radio v-model="radio" :label="4">不同意</el-radio>
</template>
<Form
ref="addForm"
:form-options="formOptions"
label-width="120px"
></Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取 消</el-button>
<el-button type="primary" @click="handleSubmit">提 交</el-button>
</span></el-dialog
>
</template>
<script>
import Form from '@/components/Form.vue'
import { approveBatchPlan, editBatchPlan } from '@/api/index.js'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {},
},
},
data() {
return {
radio: 3,
}
},
components: {
Form,
},
computed: {
formOptions() {
return [
{
label: '意见描述', // label文字
prop: 'remark', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
handleSubmit() {
this.$refs['addForm'].onValidate(() => {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
const formInfo = this.$refs['addForm'].getData()
const params = {
...this.rowData,
...formInfo,
state: this.radio,
}
approveBatchPlan(params).then((res) => {
loading.close()
if (res.code === 200) {
this.$message.success('保存成功')
this.showDialog = false
this.handleClose()
this.$emit('querySearch')
} else {
this.$message.error(res.msg)
}
})
})
},
handleClose() {
this.showDialog = false
this.formOptions.forEach((v) => {
v.initValue = ''
})
this.radio = 3
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
handleOpen() {
this.$refs['addForm'].onReset()
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
<template>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 中部操作按钮 -->
<template #operationWrap>
<el-button
icon="el-icon-document-add"
type="primary"
plain
@click="fnAdd()"
>新增</el-button
>
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
<template #batName="{ data }">
<el-button v-if="data.row.batName" class="detailBtn" @click="fnEdit(data.row, true)">{{data.row.batName}}</el-button >
<span v-else>{{data.row.batName}}</span>
</template>
</table-config>
</template>
</list-page>
<!-- 新增弹窗 -->
<Add
@querySearch="querySearch"
:visible.sync="visible"
:row-data="rowData"
:title="dialogTitle"
></Add>
<ApprovalDialog
:row-data="rowData"
@querySearch="querySearch"
title="审批"
:visible.sync="approvalVisible"
/>
</div>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/components/TableConfig.vue'
import Add from './Add.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import {editBatchPlan, postBatchPlan, updBatchPlan} from '@/api/index.js'
import { batchPlanManagement } from '@/api/interface'
import { approvalStatusOptions } from '@/utils/dictionary'
export default {
components: {
ListPage,
SearchForm,
TableConfig,
Add,
ApprovalDialog,
},
data() {
return {
selectRows: [],
query: {
url: batchPlanManagement,
method: 'post',
queryParam: {},
},
visible: false,
rowData: {},
dialogTitle: '',
approvalVisible: false,
}
},
computed: {
formOptions() {
return [
{
label: '批次名称', // label文字
prop: 'batName', // 字段名
element: 'el-input', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请输入内容', // elementui组件属性
},
{
label: '计划评审日期', // label文字
prop: 'planReviewDate', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: '', // 字段初始值
placeholder: '请选择', // elementui组件属性
},
]
},
columns() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '批次名称', prop: 'batName', width: '500px', __slotName: 'batName', },
{ label: '批次年度', prop: 'year', width: '150px'},
{
label: '状态',
prop: 'state',
width: '150px',
collectionType: 'approvalStatusOptions',
options: approvalStatusOptions,
},
{
label: '计划评审日期',
width: '200px',
prop: 'planReviewDate',
},
// { label: '创建人', prop: 'createMan' },
{ label: '创建时间', prop: 'createTime', width: '200px' },
{ label: '备注', width: '400px', prop: 'remark' },
{
label: '操作',
type: 'operation',
width: '450px',
actionButtons: [
{
title: '修改',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
{
title: '提交',
size: 'mini',
icon: 'el-icon-circle-check',
type: 'primary',
plain: true,
},
{
title: '审批',
size: 'mini',
icon: 'el-icon-s-check',
type: 'primary',
plain: true,
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
},
},
created() {},
methods: {
// 表格勾选的数据
selectionChange(data) {
this.selectRows = data
},
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
fnAdd() {
this.rowData = {}
this.dialogTitle = '新增批次计划'
this.visible = true
},
/**
* @description: 操作按钮
* @param {Object} row 当前操作行数据
* @param {String} title 当前操作按钮名称
* @author: pan
*/
fnOperation(row, title) {
switch (title) {
case '修改':
this.fnEdit(row)
break
case '删除':
this.fnDel(row)
break
case '提交':
this.fnSubmit(row)
break
case '审批':
this.fnApproval(row)
break
default:
break
}
},
fnApproval(row) {
this.rowData = row
this.approvalVisible = true
},
fnSubmit(row) {
this.$confirm('是否确认提交?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const params = {
...row,
state: 2,
}
postBatchPlan(params).then((res) => {
if (res.code === 200) {
this.$message.success('提交成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
}).catch(() => {
this.$message.info('已取消提交')
})
},
fnDel(row) {
this.$confirm('是否确认删除?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const params = {
batPlanId: [row.batPlanId],
delFlag: 1,
}
updBatchPlan(params).then((res) => {
if (res.code === 200) {
this.$message.success('删除成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnEdit(row, isDetail = false) {
this.dialogTitle = isDetail ? '详情' : '修改批次计划'
this.rowData = row
this.visible = true
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/common.scss';
.detailBtn{
border: none;
background: none;
color: #0d867f;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="80%"
@close="handleClose()"
@open="handleOpen"
>
<Form
ref="addForm"
:form-options="formOptions"
label-width="120px"
>
<!-- 收集材料类型自定义 -->
<template slot="materialType" slot-scope="{ data }">
<el-checkbox-group v-model="formInfo.materialType">
<el-checkbox v-for="item in materialTypeList" :key="item.label" :label="item.value">{{item.label}}</el-checkbox>
</el-checkbox-group>
</template>
<template slot="supervision" slot-scope="{ data }">
<el-button v-if="Object.keys(rowData).length != 0" class="addBtn" type="primary" size="mini" @click="addTabelList">添加</el-button >
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</Form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSubmit" size="mini" >保 存</el-button >
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span></el-dialog>
</template>
<script>
import Form from './Form.vue'
import TableConfig from './TableConfig.vue'
import AddTabelList from './AddTabelList.vue'
import { materialTypeList } from '@/utils/architectureInspectionDis'
import { collectDataConfiguration } from '@/api/architectureInspection'
export default {
components: { Form, TableConfig, AddTabelList },
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {},
},
edit:{
type: Boolean,
default: false
}
},
data() {
return {
formInfo: {
materialType: [],
},
materialTypeList,
query: {
url: collectDataConfiguration,
method: 'post',
queryParam: {
supervId: ''
},
},
selectId: '',
prjCodeDetail: '',
isDetail: true
}
},
watch: {
rowData: {
handler(v){
this.query.queryParam.supervId = v.supervId ? v.supervId : ''
this.$nextTick(() => {
this.$refs.searchTable.queryData()
})
},
deep: true
},
},
computed: {
formOptions() {
return [
{
label: '督查方案名称', // label文字
prop: 'supervName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
{
label: '收集材料类型', // label文字
prop: 'materialType', // 字段名
__slotName: 'materialType',
// rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
{
label: '开始时间', // label文字
prop: 'startTime', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
placeholder: '请选择', // elementui组件属性
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
{
label: '截止时间', // label文字
prop: 'endTime', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
placeholder: '请选择', // elementui组件属性
rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
{
label: '督查清单', // label文字
prop: 'supervision', // 字段名
__slotName: 'supervision',
// rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
{
label: '备注', // label文字
prop: 'notes', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
// rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
isEdit() {
if (this.title === '修改批次计划') {
return true
} else {
return false
}
},
columns() {
let arr = [
{ label: '序号', type: 'index', prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptName', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
]
if(Object.keys(this.rowData).length != 0){
arr = [
{ label: '序号', type: 'index', prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptName', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
]
}else{
arr = [
{ type: 'selection', prop: 'selection', width: '55px' },
...arr
]
}
return [...arr]
},
},
mounted() {},
methods: {
handleSubmit() {
this.$refs['addForm'].onValidate(() => {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
const formInfo = this.$refs['addForm'].getData()
let materialType = this.formInfo.materialType.filter(item => !!item).join(',')
let params = !this.edit ? {
...formInfo,
materialType,
supervision: this.selectId
} : {
...this.rowData,
...formInfo,
materialType,
supervision: this.rowData.supervision
}
let url = !this.edit ? '/collect/ad' : '/collect/upd' // 编辑
this.$postRequest(url, params).then(res => {
if (res.code === 200) {
loading.close()
this.$message.success('保存成功')
this.showDialog = false
this.handleClose()
this.$emit('querySearch')
}
})
})
},
handleClose() {
this.showDialog = false
this.formOptions.forEach((v) => {
if (v.prop === 'startTime' || v.prop === 'endTime') {
v.initValue = new Date().format('yyyy-MM-dd')
} else {
v.initValue = ''
}
})
this.formInfo.materialType = []
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
handleOpen() {
if (Object.keys(this.rowData).length) {
this.formOptions.forEach((v) => {
v.initValue = this.rowData[v.prop]
if(v.label == "收集材料类型"){
let val = this.rowData["materialType"]
this.formInfo.materialType = val.split(',')
}
if(v.label == "督查清单"){
this.selectId = v.initValue
}
})
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
})
} else {
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
this.formInfo.materialType = []
})
}
},
addTabelList() {
this.$emit('addList')
},
selectionChange(data) {
this.selectRows = data
let idArr = []
data.forEach(item => {
idArr.push(item.prjId)
})
this.selectId = idArr
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
::v-deep .el-checkbox-group{
text-align: left;
}
.iconAdd{
color: #0d867f;
}
.addBtn{
float: left;
margin-bottom: 10px;
}
::v-deep .el-form{
.el-form-item:nth-last-child(2){
.el-form-item__content{
height: 32vh !important;
}
}
}
</style>
<template>
<div :class="{'addTabelList': isDetail}">
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</div>
</template>
<script>
import TableConfig from '@/components/TableConfig.vue'
import { collectDataConfiguration } from '@/api/architectureInspection'
export default {
components: { TableConfig },
props: {
prjCode: {
type: String,
default: '',
},
isEdit: {
type: Boolean,
default: false
},
isDetail: {
type: Boolean,
default: false
}
},
watch: {
prjCode: {
handler(v){
console.log(v, 'prjCode');
this.query.queryParam.prjCode = v
this.$refs.searchTable.queryData()
},
deep: true
},
isEdit: {
handler(v){
if(v){
this.columns = [
{ label: '序号', type: 'index', width: '80px' },
{ label: '单位', prop: 'manageDeptName', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
]
}else{
this.columns = [
{ type: 'selection', width: '55px' },
{ label: '序号', type: 'index', width: '80px' },
{ label: '单位', prop: 'manageDeptName', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
]
}
},
}
},
data(){
return {
query: {
url: collectDataConfiguration,
method: 'post',
queryParam: {
prjCode: this.prjCode
},
},
columns: [],
}
},
methods: {
// 表格勾选的数据
selectionChange(data) {
this.selectRows = data
this.$emit('selectRows', data)
},
search(){
this.$refs.searchTable.queryData()
}
}
}
</script>
<style lang="scss" scoped>
.addTabelList{
height: 38vh;
}
</style>
\ No newline at end of file
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
width="80%"
@close="handleClose()"
@open="handleOpen()"
>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
@selection-change="selectionChange"
:query-immediate="false"
>
</table-config>
<span slot="footer" class="dialog-footer">
<el-button
v-if="title == '督查清单'"
type="primary"
@click="handleSubmit"
size="mini"
>保 存</el-button
>
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
import { collectDataConfiguration } from '@/api/architectureInspection'
import TableConfig from './TableConfig.vue'
export default {
components: { TableConfig },
props: {
prjCodeDetail: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
watch: {},
data() {
return {
query: {
url: collectDataConfiguration,
method: 'post',
queryParam: {
supervId: '',
},
},
selectId: '',
}
},
computed: {
columns() {
let arr = [
{ label: '序号', type: 'index', prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptName', width: '150px' },
{ label: '项目名称', prop: 'prjName' },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
]
if (this.title != '督查清单') {
arr = [
{ label: '序号', type: 'index', prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptName', width: '150px' },
{ label: '项目名称', prop: 'prjName' },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
]
} else {
arr = [{ type: 'selection', prop: 'selection', width: '55px' }, ...arr]
}
return [...arr]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
methods: {
handleClose() {
this.showDialog = false
this.query.queryParam.supervId = ''
},
handleOpen() {
this.query.queryParam.supervId = this.prjCodeDetail
this.search()
},
async search() {
this.$nextTick(() => {
this.$refs.searchTable.queryData()
})
},
selectionChange(data) {
let idArr = []
data.forEach((item) => {
idArr.push(item.prjCode)
})
this.selectId = idArr.join(',')
},
handleSubmit() {
this.$emit('selectTabel', this.selectId)
this.handleClose()
},
},
}
</script>
<style lang="scss" scoped>
@import '@/styles/elementui.scss';
::v-deep .el-dialog__body {
height: 36vh;
}
</style>
<!--
* @Description: 表单组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-03-20 09:29:25
-->
<!-- /**
* 搜索栏公共组件
*/ -->
<template>
<div class="form-box">
<el-form
:model="formData"
ref="formRef"
:label-width="labelWidth"
:label-position="labelPosition"
>
<el-form-item v-for="(item, index) in formOptions"
:key="newKeys[index]" :prop="item.prop" :label="item.label" :rules="item.rules">
<!-- 自定义插槽,可用于特殊表单块 -->
<template v-if="item.__slotName">
<slot :name="item.__slotName" :data="item"></slot>
</template>
<SearchFormItem
v-else
v-model="formData[item.prop]"
:itemOptions="item"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import SearchFormItem from './SearchFormItem.vue'
export default {
props: {
/**
* 表单配置
* 示例:
* [{
* label: '用户名', // label文字
* prop: 'username', // 字段名
* element: 'el-input', // 指定elementui组件
* initValue: '阿黄', // 字段初始值
* placeholder: '请输入用户名', // elementui组件属性
* rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
* events: { // elementui组件方法
* input (val) {
* console.log(val)
* },
* ...... // 可添加任意elementui组件支持的方法
* }
* ...... // 可添加任意elementui组件支持的属性
* }]
*/
formOptions: {
type: Array,
required: true,
default() {
return []
},
},
labelWidth: {
type: String,
default: '80px',
},
labelPosition: {
type: String,
default: 'right',
},
},
data() {
return {
formData: {},
}
},
computed: {
newKeys() {
return this.formOptions.map((v) => {
return this.createUniqueString()
})
},
},
created() {
this.addInitValue()
},
methods: {
createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
},
// 校验
onValidate(callback) {
this.$refs.formRef.validate((valid) => {
if (valid) {
// console.log(this.formData)
callback()
}
})
},
// 获取表单数据
getData() {
return this.formData
// this.onValidate(() => {
// this.$emit('getData', this.formData)
// })
},
// 导出
onExport() {
this.onValidate(() => {
this.$emit('onExport', this.formData)
})
},
onReset() {
this.$refs.formRef.resetFields()
},
// 添加初始值
addInitValue() {
const obj = {}
this.formOptions.forEach((v) => {
if (v.initValue !== undefined) {
obj[v.prop] = v.initValue
}
})
this.formData = obj
},
},
components: { SearchFormItem },
}
</script>
<style lang="scss" scoped>
.form-box {
margin-top: 10px;
.btn-box {
display: flex;
height: 38px;
}
.el-form {
// display: flex;
flex-wrap: wrap;
/deep/ .el-form-item__label {
flex-shrink: 0;
color: #000;
}
// el-input宽度
/deep/ .form-item {
text-align: left;
.el-input,
.el-select {
width: 30% !important;
}
}
}
}
</style>
<!--
* @Description: 表单匹配项
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 15:11:47
* @LastEditors: pan
* @LastEditTime: 2024-06-19 18:07:17
-->
<template>
<div class="form-item">
<el-input
v-if="isInput"
v-no-backslash
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
clearable
:placeholder="itemOptions.placeholder"
></el-input>
<el-input-number
v-if="isInputNumber"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:controls-position="itemOptions['controls-position'] || 'right'"
></el-input-number>
<el-select
v-if="isSelect"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
clearable
>
<el-option
v-for="item in itemOptions.options"
:key="item[handleSelectValue]"
:label="item[handleSelectLabel]"
:value="item[handleSelectValue]"
></el-option>
</el-select>
<el-radio-group
v-if="isRadio"
v-bind="bindProps"
v-on="bindEvents"
v-model="currentVal"
>
<el-radio
v-for="item in itemOptions.options"
:key="item.value"
:label="item.value"
>{{ item.label }}</el-radio
>
</el-radio-group>
<el-rate
v-if="isRate"
v-bind="bindProps"
v-on="bindEvents"
v-model="currentVal"
></el-rate>
<!-- datetimerange/daterange -->
<!-- <el-date-picker
v-if="isDatePickerDateRange"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:type="itemOptions.type || 'datetimerange'"
clearable
:picker-options="pickerOptionsRange"
start-placeholder="开始日期"
range-separator="至"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker> -->
<!-- monthrange -->
<!-- <el-date-picker
v-if="isDatePickerMonthRange"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:type="itemOptions.type"
clearable
:picker-options="pickerOptionsRangeMonth"
start-placeholder="开始日期"
range-separator="至"
end-placeholder="结束日期"
value-format="yyyy-MM"
></el-date-picker> -->
<!-- other -->
<el-date-picker
v-if="isDatePickerOthers"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
:type="itemOptions.type"
clearable
placeholder="请选择日期"
></el-date-picker>
<el-cascader
v-if="isCascader"
v-model="currentVal"
v-bind="bindProps"
v-on="bindEvents"
clearable
></el-cascader>
</div>
</template>
<script>
import { getDianXingAnLiSelectData } from '@/api/index.js'
export default {
inheritAttrs: false,
props: {
value: {},
itemOptions: {
type: Object,
default() {
return {}
},
},
},
data() {
return {
// pickerOptionsRange: tools.pickerOptionsRange,
// pickerOptionsRangeMonth: tools.pickerOptionsRangeMonth,
}
},
computed: {
handleSelectValue() {
if (this.itemOptions.keyOption) {
return this.itemOptions.keyOption['value']
}
return 'value'
},
handleSelectLabel() {
if (this.itemOptions.keyOption) {
return this.itemOptions.keyOption['label']
}
return 'label'
},
// 双向绑定数据值
currentVal: {
get() {
if (this.isSelect) {
if (this.value == 0) {
return this.value + ''
} else {
return this.value && this.value + ''
}
} else {
return this.value
}
},
set(val) {
this.$emit('input', val)
},
},
// 绑定属性
bindProps() {
let obj = { ...this.itemOptions }
// 移除冗余属性
delete obj.label
delete obj.prop
delete obj.element
delete obj.initValue
delete obj.rules
delete obj.events
if (obj.element === 'el-select') {
delete obj.options
}
return obj
},
// 绑定方法
bindEvents() {
return this.itemOptions.events || {}
},
// el-input
isInput() {
return this.itemOptions.element === 'el-input'
},
// el-input-number
isInputNumber() {
return this.itemOptions.element === 'el-input-number'
},
// el-select
isSelect() {
return this.itemOptions.element === 'el-select'
},
// el-radio
isRadio() {
return this.itemOptions.element === 'el-radio'
},
// el-rate
isRate() {
return this.itemOptions.element === 'el-rate'
},
// el-date-picker (type: datetimerange/daterange)
isDatePickerDateRange() {
const isDatePicker = this.itemOptions.element === 'el-date-picker'
const isDateRange =
!this.itemOptions.type ||
this.itemOptions.type === 'datetimerange' ||
this.itemOptions.type === 'daterange'
return isDatePicker && isDateRange
},
// el-date-picker (type: monthrange)
isDatePickerMonthRange() {
const isDatePicker = this.itemOptions.element === 'el-date-picker'
const isMonthRange = this.itemOptions.type === 'monthrange'
return isDatePicker && isMonthRange
},
// el-date-picker (type: other)
isDatePickerOthers() {
const isDatePicker = this.itemOptions.element === 'el-date-picker'
return (
isDatePicker &&
!this.isDatePickerDateRange &&
!this.isDatePickerMonthRange
)
},
// el-cascader
isCascader() {
return this.itemOptions.element === 'el-cascader'
},
},
created() {
// 字典下拉框处理
if (this.isSelect && this.itemOptions.dictType) {
this.getDictTypeOptions(this.itemOptions.dictType)
}
},
methods: {
/**
* @description: 获取下拉框字典,并缓存
* @param {String} key 对应字典接口的参数值
* @author: pan
*/
async getDictTypeOptions(key) {
var dictTypeOptions = []
var storedDic = localStorage.getItem('dic_' + key)
if (storedDic) {
dictTypeOptions = JSON.parse(storedDic)
} else {
const params = { key }
const res = await getDianXingAnLiSelectData(params)
if (res.code !== 200) return
dictTypeOptions = res.data
const jsonStr = JSON.stringify(res.data)
localStorage.setItem('dic_' + key, jsonStr)
}
this.itemOptions.options = dictTypeOptions
this.$forceUpdate()
},
},
components: {},
}
</script>
<style lang="scss" scoped></style>
<template>
<!-- 新增 -->
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="80%"
@close="handleClose()"
>
<AddTabelList @selectRows='selectRows' />
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSubmit" size="mini" >保 存</el-button >
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span></el-dialog>
</template>
<script>
import AddTabelList from './AddTabelList.vue'
export default {
components: { AddTabelList },
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
computed: {
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
selectRows() {
return (rows) => {
let idArr = []
rows.forEach(item => {
idArr.push(item.prjCode)
})
this.selectId = idArr.join(',')
}
}
},
data(){
return {
selectId: '',
}
},
methods: {
handleClose() {
this.showDialog = false
},
// selectRows(v){
// console.log(v);
// },
handleSubmit() {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
// const formInfo = this.$refs['addForm'].getData()
// const typeApi = this.isEdit ? editBatchPlan : addBatchPlan
// const params = {
// ...this.rowData,
// ...formInfo,
// state: 1,
// }
// typeApi(params).then((res) => {
// if (res.code === 200) {
// loading.close()
// this.$message.success('保存成功')
// this.showDialog = false
// this.handleClose()
// this.$emit('querySearch')
// }
// })
},
}
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 中部操作按钮 -->
<template #operationWrap>
<el-button
type="primary"
icon="el-icon-document-add"
plain
@click="fnAdd"
>新建</el-button
>
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
>
<template #supervision="{ data }">
<el-button
v-if="data.row.supervisionStr"
class="detailBtn"
@click="detailBtn(data.row)"
>{{ data.row.supervisionStr }}</el-button
>
<span v-else>{{ data.row.supervisionStr }}</span>
</template>
</table-config>
</template>
</list-page>
<!-- 新增弹窗 -->
<Add
@querySearch="querySearch"
:visible.sync="visible"
:row-data="rowData"
:title="dialogTitle"
@addList="addList"
:edit="isEdit"
></Add>
<!-- 详情 -->
<Detail
ref="Detail"
:prjCodeDetail="detailPrjCode"
:visible.sync="visibleDetail"
@selectTabel="selectTabel"
:title="detailTitle"
/>
</div>
</template>
<script>
import AddTabelList from './AddTabelList.vue'
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from './TableConfig.vue'
import { collectDataSearch } from '@/api/architectureInspection'
import Add from './Add.vue'
import Detail from './Detail.vue'
import { materialTypeList, stateCode } from '@/utils/architectureInspectionDis'
export default {
name: 'collectDataConfiguration',
components: { ListPage, SearchForm, TableConfig, Add, AddTabelList, Detail },
computed: {
formOptions() {
return [
{
label: '督查方案名称', // label文字
prop: 'supervName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
},
columns() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '督查方案名称', prop: 'supervName' },
{
label: '材料类型',
prop: 'materialType',
collectionType: 'materialTypeList',
options: materialTypeList,
},
{ label: '督查清单', prop: 'supervision', __slotName: 'supervision' },
{ label: '开始时间', prop: 'startTime', width: '120px' },
{ label: '截止时间', prop: 'endTime', width: '120px' },
{
label: '状态',
prop: 'state',
width: '120px',
collectionType: 'stateCode',
options: stateCode,
},
{ label: '备注', prop: 'notes', width: '100px' },
{
label: '操作',
type: 'operation',
width: '360px',
actionButtons: [
{
title: '编辑',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
disabledCallback: (row, title) => {
return row.state == '1' ? true : false
},
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
disabledCallback: (row, title) => {
return row.state == '1' ? true : false
},
},
{
title: '发布',
size: 'mini',
icon: 'el-icon-circle-check',
type: 'primary',
plain: true,
disabledCallback: (row, title) => {
return row.state == '1' ? true : false
},
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
},
},
data() {
return {
query: {
url: collectDataSearch,
method: 'post',
queryParam: {
supervName: '',
},
},
visible: false,
rowData: {},
dialogTitle: '',
approvalVisible: false,
selectRows: [],
selectId: '',
prjCode: '',
detailTitle: '详情',
visibleDetail: false,
detailPrjCode: '',
isEdit: false,
}
},
methods: {
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
fnAdd() {
this.visible = true
this.rowData = {}
this.dialogTitle = '收集资料配置'
this.isEdit = false
},
/**
* @description: 操作按钮
* @param {Object} row 当前操作行数据
* @param {String} title 当前操作按钮名称
* @author: pan
*/
fnOperation(row, title) {
switch (title) {
case '编辑':
this.fnEdit(row)
break
case '删除':
this.fnDel(row)
break
case '发布':
this.fnSubmit(row)
default:
break
}
},
fnSubmit(row) {
this.$confirm('是否确认发布?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const params = {
...row,
state: 2,
}
this.$postRequest('/collect/fb', { ...row }).then((res) => {
if (res.code === 200) {
this.$message.success('发布成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnDel(row) {
this.$confirm('是否确认删除?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const params = {
...row,
delFlag: 1,
}
this.$postRequest('/collect/del', { supervId: row.supervId }).then(
(res) => {
if (res.code === 200) {
this.$message.success('删除成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error('删除失败')
}
},
)
})
.catch(() => {})
},
fnEdit(row) {
this.dialogTitle = '收集资料配置'
this.rowData = row
this.visible = true
this.isEdit = true
},
addList() {
this.detailTitle = '督查清单'
this.detailPrjCode = ''
this.visibleDetail = true
},
// 督查清单 详情
detailBtn(v) {
this.detailTitle = '详情'
this.detailPrjCode = v.supervId
this.visibleDetail = true
},
selectTabel(v) {
let id = this.rowData.supervision
let arrV = v.split(',')
let arrId = id.split(',')
let arr = [...arrV, ...arrId]
this.rowData.supervision = !!v ? Array.from(new Set(arr)).join(',') : id
// this.rowData.supervision = !!v ? v +','+id : id
},
},
}
</script>
<style lang="scss" scoped>
.detailBtn {
border: none;
background: none;
color: #0d867f;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<template>
<div class="comCenterServeList">
<div class="table_container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="业务中台服务能力清单" name="page1">
<page1></page1>
</el-tab-pane>
<el-tab-pane label="数据中台资源目录清单" name="page2">
<page2></page2>
</el-tab-pane>
<el-tab-pane label="数据中台资源服务清单" name="page3">
<page3></page3>
</el-tab-pane>
<el-tab-pane label="技术中台公共技术能力清单" name="page4">
<page4></page4>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import page1 from "./pages/page1";
import page2 from "./pages/page2";
import page3 from "./pages/page3";
import page4 from "./pages/page4";
import { MessageBox, Message } from 'element-ui';
import $ from 'jquery';
export default {
name: 'comCenterServeList',
components: {
page1,
page2,
page3,
page4,
},
data() {
return {
activeName: "page1",
};
},
mounted(){
},
methods: {
handleClick(tab) {
// console.log(tab);
},
}
}
</script>
<style scoped>
.form_item_container{
display: flex;
flex-wrap: wrap;
}
.el-form-item{
display: flex;
width: 33%;
}
.cross1{
width: 100%;
}
/deep/ .cross1 > .el-form-item__content{
width: 86.4% !important;
}
.comCenterServeList{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1{
display: flex;
justify-content: space-between;
}
.el-button--primary{
background: rgba(13,134,127,0.1);
color: #0D867F;
border: 0;
}
.add_select_item_icon_container{
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/deep/ .el-dialog__header{
background-color: #0D867F;
text-align: left;
}
/deep/ .el-input-group__append{
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
/deep/ .el-dialog__title{
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.search_menu{
display: flex;
justify-content: space-between;
}
.search_menu_item_container{
display: flex;
align-items: center;
}
.search_menu_btn_container{
display: flex;
align-items: center;
}
.search_menu_item{
display: flex;
align-items: center;
width: 344px;
}
.search_title{
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item{
width: 60%;
}
.search_btn{
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.el-button--default{
border: 0;
}
.shanChu_btn{
color: #DD6A15;
background-color: #F8EBE2;
}
.tingYong_btn{
color: #DEA82A;
background-color: #FDF6E6;
}
.el-button.is-disabled{
color: #C0C4CC !important;
background-color: #fff !important;
}
.add_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
}
.version_btn{
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13,134,127,0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.query_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13,134,127,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn{
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244,244,244,1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon{
margin-right: 10px;
}
.table_container{
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
}
.el-pagination{
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0D867F;
}
.greenButton{
background-color: #0D867F;
color: #fff;
}
</style>
\ No newline at end of file
<template>
<div class="businessMsgWrapper">
<ETable ref="ETableRef" title="业务信息列表" :tableRef.sync="tableRef" height="100%" tableKey="businessMsg" :data="data"
:columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList" :tableBtnList="tableBtnList"
@sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
<SearchForm slot="header" :formOptions="formOptions" @onSearch="getList" @onReset="reset"></SearchForm>
</ETable>
</div>
</template>
<script>
import SearchForm from "@/components/SearchForm.vue";
import ETable from "@/newComponents/ETable/index.vue";
import tableMixin from "@/mixins/tableMixin";
import { getTecList } from '@/api/comCenterServeListNew'
export default {
name: "businessMsg",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
archiTypeId: 1,
},
selectionList: [],
formOptions: [
{
label: "业务活动名称",
prop: "assetName",
element: "el-input",
placeholder: "请输入",
},
// {
// label: "统计日期",
// prop: "statTime",
// element: "el-date-picker",
// type: 'date',
// valueFormat: 'yyyy-MM-dd',
// element: 'el-date-picker',
// initValue: new Date().format('yyyy-MM-dd'),
// placeholder: '统计日期',
// },
],
operateList: [
// {
// label: "新增",
// type: "primary",
// size: "mini",
// icon: "el-icon-plus",
// disabled: true,
// click: () => {
// console.log("add");
// },
// },
{
label: "下载模板",
type: "primary",
size: "mini",
icon: "el-icon-download",
disabled: false,
click: () => {
console.log("测试");
},
},
{
label: "导入",
type: "primary",
size: "mini",
icon: "el-icon-upload",
disabled: false,
click: () => {
console.log("测试");
},
},
],
pager: {
current: 1,
size: 10,
total: 0,
sizes: [10, 20, 50, 100],
},
columns: [
// {
// label: "中台服务编码",
// prop: "abilityCode",
// showOverflowTooltip: true,
// align: "center",
// fixed: "left",
// minWidth: 140
// },
// {
// label: "中台服务名称",
// prop: "abilityName",
// minWidth: 140,
// showOverflowTooltip: true,
// align: "center",
// },
{
label: "业务活动名称",
prop: "assetName",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务活动编码",
prop: "assetNumber",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务流程名称",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
return h("span", {}, this.handleName(params.parentAssetNames, 0) || '--');
},
},
{
label: "业务职能",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
return h("span", {}, this.handleName(params.parentAssetNames, 1) || '--');
},
},
{
label: "业务域",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
return h("span", {}, this.handleName(params.parentAssetNames, 2) || '--');
},
},
{
label: "关联的业务对象数量",
T: 'a',
prop: "buildType2",
minWidth: 120,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length ? params.statisticsList[0] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '关联的业务对象数量', params)
}
}
}, enName);
},
// click: (row) => {
// this.$emit('dialog', '关联的业务对象数量', row)
// },
},
{
label: "关联的应用服务数量",
T: 'a',
prop: "buildType2",
minWidth: 120,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length > 1 ? params.statisticsList[1] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '关联的应用服务数量', params)
}
}
}, enName);
},
// click: (row) => {
// this.$emit('dialog', '关联的应用服务数量', row)
// },
},
],
tableBtnList: [
{
label: "编辑",
type: "primary",
size: "mini",
icon: "el-icon-circle-plus-outline",
click: (row, index) => {
console.log("编辑", row);
},
},
],
data: [],
};
},
mounted() {
this.getList()
},
methods: {
handleName(name,idx) {
let strArr = ['', '', '']
if(name) {
let str = name.split(',')
if(str.length === 1) {
strArr[2] = str[0]
} else if(str.length === 2) {
strArr[1] = str[0]
strArr[2] = str[1]
} else if(str.length === 3) {
strArr[0] = str[0]
strArr[1] = str[1]
strArr[2] = str[2]
}
}
return strArr[idx]
},
doLayout() {
this.tableRef.doLayout()
},
async getList() {
let params = { ...this.form, pageSize: this.pager.size, current: this.pager.current }
this.loading = true
const res = await getTecList(params).catch(() => {
this.pager.total = 0
this.loading = false
})
this.loading = false
if (res.code == 200) {
this.data = res.data?.records
this.pager.total = res.data?.total
}
},
search() {
this.pager.current = 1
this.pager.total = 0
this.getList()
},
reset() {
this.pager.current = 1
this.pager.total = 0
this.form = {
archiTypeId: 1,
}
this.getList()
},
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.businessMsgWrapper {
width: 100%;
height: 100%;
/deep/ .el-form {
width: 100%;
.el-form-item:last-child {
flex: 1;
justify-content: flex-end;
margin-right: 0;
}
}
.w180 {
width: 180px !important;
}
.btn-box {
height: 38px;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
</style>
\ No newline at end of file
<template>
<div class="dataEntityWrapper">
<ETable ref="ETableRef" title="数据实体信息列表" :tableRef.sync="tableRef" height="100%" tableKey="dataEntity" :data="data"
:columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList"
@sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
<el-form class="search flex" :model="form" slot="header">
<el-form-item label="物理实体名称" class="flex">
<el-input class="w180" type="text" placeholder="请输入" v-model="form.abilityName"
maxlength="50"></el-input>
</el-form-item>
<div class="btn-box m-l-10">
<el-button type="primary" class="btn-search" icon="el-icon-search" @click="search"
v-preventReClick>查询</el-button>
<el-button type="default" class="btn-reset" icon="el-icon-refresh"
@click="reset">重置</el-button>
</div>
</el-form>
</ETable>
</div>
</template>
<script>
import { stateOptions, serverTypeOptions, abilitySourceOptions, midGroundNameOptions, midGroundTypeOptions } from '../options.js'
import { getDataList } from '@/api/comCenterServeListNew'
import SearchForm from "@/components/SearchForm.vue";
import ETable from "@/newComponents/ETable/index.vue";
import tableMixin from "@/mixins/tableMixin";
export default {
name: "dataEntity",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
midGroundNameOptions,
midGroundTypeOptions,
loading: false,
tableRef: null,
form: {
abilityName: "",
midGroundName: "",
midGroundType: "",
statTime: "",
archiTypeId: 3,
},
selectionList: [],
operateList: [
// {
// label: "新增",
// type: "primary",
// size: "mini",
// icon: "el-icon-plus",
// disabled: true,
// click: () => {
// console.log("add");
// },
// },
{
label: "下载模板",
type: "primary",
size: "mini",
icon: "el-icon-download",
disabled: false,
click: () => {
console.log("测试");
},
},
{
label: "导入",
type: "primary",
size: "mini",
icon: "el-icon-upload",
disabled: false,
click: () => {
console.log("测试");
},
},
],
pager: {
current: 1,
size: 10,
total: 0,
sizes: [10, 20, 50, 100],
},
columns: [
// {
// label: "中台服务编码",
// prop: "abilityCode",
// showOverflowTooltip: true,
// align: "center",
// fixed: "left",
// minWidth: 140
// },
// {
// label: "中台服务名称",
// prop: "abilityName",
// minWidth: 140,
// showOverflowTooltip: true,
// align: "center",
// },
{
label: "物理实体名称",
prop: "assetName",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "物理实体英文名称",
prop: "fieldsValue",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
let arr = params.fieldsValue ? JSON.parse(params.fieldsValue) : []
let obj = arr.find(i => i.cnName == '物理实体英文名称')
let enName = obj ? obj.value_ : '--'
return h("span", {}, enName);
},
},
{
label: "物理实体编码",
prop: "fieldsValue",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
let arr = params.fieldsValue ? JSON.parse(params.fieldsValue) : []
let obj = arr.find(i => i.cnName == '物理实体编码')
let enName = obj ? obj.value_ : '--'
return h("span", {}, enName);
},
},
{
label: "逻辑实体",
prop: "parentAssetNames",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
let arr = params.parentAssetNames ? params.parentAssetNames.split(',') : []
let enName = arr[1] || '--'
return h("span", {}, enName);
},
},
{
label: "概念实体",
prop: "parentAssetNames",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
let arr = params.parentAssetNames ? params.parentAssetNames.split(',') : []
let enName = arr[0] || '--'
return h("span", {}, enName);
},
},
],
data: [],
};
},
created() {
this.getList()
},
methods: {
doLayout() {
this.tableRef.doLayout()
},
async getList() {
let params = { ...this.form, pageSize: this.pager.size, current: this.pager.current }
this.loading = true
const res = await getDataList(params).catch(() => {
this.pager.total = 0
this.loading = false
})
this.loading = false
// console.log('getList', res)
if (res.code == 200) {
this.data = res.data.records
this.pager.total = res.data.total
}
},
search() {
this.pager.current = 1
this.pager.total = 0
this.getList()
},
reset() {
this.pager.current = 1
this.pager.total = 0
this.form = {
abilityName: "",
midGroundName: "",
midGroundType: "",
statTime: "",
archiTypeId: 3,
}
this.getList()
},
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.dataEntityWrapper {
width: 100%;
height: 100%;
.w180 {
width: 220px !important;
}
.search {
margin-top: 25px;
// margin-bottom: 15px;
}
.btn-box {
height: 38px;
display: flex;
justify-content: flex-end;
flex: 1;
align-items: center;
}
}
</style>
\ No newline at end of file
<template>
<el-dialog :title="title" custom-class="comDialog" :visible.sync="show" :center="false" :close-on-click-modal="false"
width="60%" @close="close">
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="中台服务名称" prop="abilityName">
<el-input class="w180" type="text" placeholder="中台服务名称" v-model="form.abilityName"
maxlength="50"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中台服务编码" prop="abilityCode">
<el-input class="w180" type="text" placeholder="中台服务编码" v-model="form.abilityCode"
maxlength="50"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="资源类型" prop="abilityType">
<el-select class="w180" v-model="form.abilityType" placeholder="资源类型"
@change="(val) => { comChange(val, 'abilityType') }">
<el-option v-for="item in abilitySourceOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模块" prop="module">
<el-input class="w180" type="text" placeholder="模块" v-model="form.module" maxlength="50"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中台类型" prop="midGroundType">
<el-select class="w180" v-model="form.midGroundType" placeholder="中台类型"
@change="(val) => { comChange(val, 'midGroundType') }">
<el-option v-for="item in midGroundTypeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中台名称" prop="midPlatformId">
<el-select class="w180" v-model="form.midPlatformId" placeholder="中台名称"
@change="(val) => { comChange(val, 'midPlatformId') }">
<el-option v-for="item in midGroundNameOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submit">保 存</el-button>
</span>
</el-dialog>
</template>
<script>
import {
serverTypeOptions,
abilitySourceOptions,
// midGroundNameOptions,
// midGroundTypeOptions,
} from "../options.js";
import { addService, getDictOPtionsFromKeyword } from '@/api/comCenterServeListNew'
export default {
data() {
return {
loading: false,
serverTypeOptions,
abilitySourceOptions,
midGroundNameOptions: [],
midGroundTypeOptions: [],
show: false,
title: "新增中台服务",
form: {
abilityCode: undefined,
abilityName: undefined,
inventoryName: undefined,
abilityType: undefined,
// abilitySource: "1",
midGroundId: undefined,
midPlatformName: undefined,
midGroundName: undefined,
midPlatformId: undefined,
module: undefined,
state: 2,
},
rules: {
abilityName: {
required: true,
message: '中台服务名称不能为空',
trigger: 'blur'
},
abilityCode: {
required: true,
message: '中台服务编码不能为空',
trigger: 'blur'
},
abilityType: {
required: true,
message: '资源类型不能为空',
trigger: 'change'
},
module: {
required: true,
message: '模块不能为空',
trigger: 'blur'
},
midGroundType: {
required: true,
message: '中台类型不能为空',
trigger: 'change'
},
midPlatformId: {
required: true,
message: '中台名称不能为空',
trigger: 'change'
}
},
};
},
async mounted() {
await this.getMidGroundNameOptions()
await this.getMidGroundTypeOptions()
},
methods: {
async getMidGroundNameOptions() {
const res = await getDictOPtionsFromKeyword('mid_platform_type').catch(() => { })
console.log('getMidGroundNameOptions', res)
if (res.code == 200) {
this.midGroundNameOptions = res.data
}
},
async getMidGroundTypeOptions() {
const res = await getDictOPtionsFromKeyword('mid_ground_type').catch(() => { })
console.log('getMidGroundTypeOptions', res)
if (res.code == 200) {
this.midGroundTypeOptions = res.data
}
},
comChange(val, str) {
let obj
switch (str) {
case 'abilityType':
obj = val ? this.abilitySourceOptions.find(i => i.value == val) : ''
this.form.inventoryName = obj ? obj.label : '';
break;
case 'midGroundType':
obj = val ? this.midGroundTypeOptions.find(i => i.value == val) : ''
this.form.midGroundName = obj ? obj.label : '';
break;
case 'midPlatformId':
obj = val ? this.midGroundNameOptions.find(i => i.value == val) : ''
this.form.midPlatformName = obj ? obj.label : '';
break;
default:
return
}
// console.log('this.form', this.form)
},
async close() {
await this.$refs.formRef.resetFields()
this.show = false;
},
open(row) {
row ? (this.form = { ...row }) : "";
this.show = true;
},
submit() {
this.$refs.formRef.validate(async (valid) => {
if (valid) {
this.loading = true
const res = await addService(this.form).catch(() => {
this.loading = false
})
this.loading = false
console.log(res)
if (res.code == 200) {
this.$message.success('新增成功')
this.$emit("submit");
this.close();
}
} else {
return false;
}
});
},
release() { },
},
};
</script>
<style lang="scss" scoped>
.w180 {
width: 180px;
}
/deep/.el-form-item__content {
display: flex;
justify-content: flex-start;
align-items: center;
}
</style>
<template>
<div class="technicalComWrapper">
<ETable ref="ETableRef" title="技术组件信息列表" :tableRef.sync="tableRef" height="100%" tableKey="technicalCom"
:data="data" :columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList"
@sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
<el-form class="search flex" :model="form" slot="header">
<el-form-item label="基础组件名称" class="flex">
<el-input class="w180" type="text" placeholder="基础组件名称" v-model="form.assetName"
maxlength="50"></el-input>
</el-form-item>
<el-form-item label="发布时间" class="flex">
<el-date-picker style="width:340px" v-model="form.time" value-format="yyyy-MM-dd"
type="datetimerange" placeholder="发布时间">
</el-date-picker>
</el-form-item>
<div class="btn-box m-l-10">
<el-button type="primary" class="btn-search" icon="el-icon-search" @click="search"
v-preventReClick>查询</el-button>
<el-button type="default" class="btn-reset" icon="el-icon-refresh"
@click="reset">重置</el-button>
</div>
</el-form>
</ETable>
</div>
</template>
<script>
import { stateOptions, serverTypeOptions, abilitySourceOptions, midGroundNameOptions, midGroundTypeOptions } from '../options.js'
import { getTecList } from '@/api/comCenterServeListNew'
import SearchForm from "@/components/SearchForm.vue";
import ETable from "@/newComponents/ETable/index.vue";
import tableMixin from "@/mixins/tableMixin";
export default {
name: "technicalCom",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
assetName: '',
beginTime: '',
endTime: '',
time: undefined,
archiTypeId: 4,
},
selectionList: [],
operateList: [
// {
// label: "新增",
// type: "primary",
// size: "mini",
// icon: "el-icon-plus",
// disabled: true,
// click: () => {
// console.log("add");
// },
// },
{
label: "下载模板",
type: "primary",
size: "mini",
icon: "el-icon-download",
disabled: false,
click: () => {
console.log("测试");
},
},
{
label: "导入",
type: "primary",
size: "mini",
icon: "el-icon-upload",
disabled: false,
click: () => {
console.log("测试");
},
},
],
pager: {
current: 1,
size: 10,
total: 0,
sizes: [10, 20, 50, 100],
},
columns: [
// {
// label: "中台服务编码",
// prop: "buildType",
// showOverflowTooltip: true,
// align: "center",
// fixed: "left",
// minWidth: 140
// },
// {
// label: "中台服务名称",
// prop: "buildType2",
// minWidth: 140,
// showOverflowTooltip: true,
// align: "center",
// },
{
label: "基础组件名称",
prop: "assetName",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "基础组件编码",
prop: "assetCode",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
let arr = params.fieldsValue ? JSON.parse(params.fieldsValue) : []
let obj = arr.find(i => i.cnName == '基础组件编码')
let enName = obj ? obj.value_ : '--'
return h("span", {}, enName);
},
},
{
label: "技术平台",
prop: "parentAssetNames",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
let arr = params.parentAssetNames ? params.parentAssetNames.split(',') : []
let enName = arr.length > 1 ? arr[1] : ''
return h("span", {}, enName);
},
},
{
label: "支撑的系统数量",
prop: "statNum",
minWidth: 140,
align: "center",
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length ? params.statisticsList[0] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '支撑的系统数量', params)
}
}
}, enName);
},
},
{
label: "支撑的数据服务数量",
prop: "statNum",
minWidth: 140,
align: "center",
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length > 1 ? params.statisticsList[1] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '支撑的数据服务数量', params)
}
}
}, enName);
},
},
],
data: [],
};
},
mounted() {
this.getList()
},
methods: {
doLayout() {
this.tableRef.doLayout()
},
async getList() {
const { time, ...others } = this.form
let beginTime, endTime
if (time) {
[beginTime, endTime] = time
}
let params = { ...others, beginTime, endTime, pageSize: this.pager.size, current: this.pager.current }
this.loading = true
const res = await getTecList(params).catch(() => {
this.pager.total = 0
this.loading = false
})
this.loading = false
// console.log('technicalCom', res)
if (res.code == 200) {
this.data = res.data?.records
this.pager.total = res.data?.total
}
},
search() {
this.pager.current = 1
this.pager.total = 0
this.getList()
},
reset() {
this.pager.current = 1
this.pager.total = 0
this.form = {
assetName: '',
beginTime: '',
endTime: '',
time: undefined,
archiTypeId: 4,
}
this.getList()
},
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.technicalComWrapper {
width: 100%;
height: 100%;
.w180 {
width: 180px !important;
}
.search {
margin-top: 25px;
}
.btn-box {
height: 38px;
display: flex;
justify-content: flex-end;
align-items: center;
flex: 1;
}
}
</style>
\ No newline at end of file
<template>
<div class="usiingServiceWrapper">
<ETable ref="ETableRef" title="应用服务列表" :tableRef.sync="tableRef" height="100%" tableKey="usiingService" :data="data"
:columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList" :tableBtnList="tableBtnList"
@sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
<SearchForm ref="searchForm" slot="header" :formOptions="formOptions" @onSearch="getList"></SearchForm>
</ETable>
</div>
</template>
<script>
import SearchForm from "@/components/SearchForm.vue";
import ETable from "@/newComponents/ETable/index.vue";
import tableMixin from "@/mixins/tableMixin";
import { getTecList } from '@/api/comCenterServeListNew'
export default {
name: "usiingService",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
archiTypeId: 2,
},
selectionList: [],
formOptions: [
{
label: "应用服务名称",
prop: "assetName",
element: "el-input",
placeholder: "请输入",
},
// {
// label: "统计日期",
// prop: "buildType",
// element: "el-date-picker",
// type: 'date',
// valueFormat: 'yyyy-MM-dd',
// element: 'el-date-picker',
// initValue: new Date().format('yyyy-MM-dd'),
// placeholder: '统计日期',
// },
// {
// label: "业务服务名称",
// prop: "buildType",
// element: "el-select",
// dictType: "build_type",
// placeholder: "业务服务名称",
// },
// {
// label: "应用服务名称",
// prop: "buildType",
// element: "el-select",
// dictType: "build_type",
// placeholder: "应用服务名称",
// },
],
operateList: [
// {
// label: "新增",
// type: "primary",
// size: "mini",
// icon: "el-icon-plus",
// disabled: true,
// click: () => {
// console.log("add");
// },
// },
{
label: "下载模板",
type: "primary",
size: "mini",
icon: "el-icon-download",
disabled: false,
click: () => {
console.log("测试");
},
},
{
label: "导入",
type: "primary",
size: "mini",
icon: "el-icon-upload",
disabled: false,
click: () => {
console.log("测试");
},
},
],
pager: {
current: 1,
size: 10,
total: 0,
sizes: [10, 20, 50, 100],
},
columns: [
// {
// label: "中台服务编码",
// prop: "buildType",
// showOverflowTooltip: true,
// align: "center",
// fixed: "left",
// minWidth: 140
// },
// {
// label: "中台服务名称",
// prop: "buildType2",
// minWidth: 140,
// showOverflowTooltip: true,
// align: "center",
// },
{
label: "应用活动名称",
prop: "assetName",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "应用活动编码",
prop: "assetNumber",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "功能模块",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
return h("span", {}, this.handleName(params.parentAssetNames, 0) || '--');
},
},
{
label: "系统应用",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
render: (h, params) => {
return h("span", {}, this.handleName(params.parentAssetNames, 1) || '--');
},
},
{
label: "关联的业务对象数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
// click: (row) => {
// this.$emit('dialog', '关联的业务对象数量', row)
// },
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length > 1 ? params.statisticsList[0] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '关联的业务对象数量', params)
}
}
}, enName);
},
},
{
label: "关联的业务活动数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
// click: (row) => {
// this.$emit('dialog', '关联的业务活动数量', row)
// },
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length > 1 ? params.statisticsList[1] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '关联的业务活动数量', params)
}
}
}, enName);
},
},
{
label: "关联的物理实体数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
// click: (row) => {
// this.$emit('dialog', '关联的物理实体数量', row)
// },
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length > 1 ? params.statisticsList[2] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '关联的物理实体数量', params)
}
}
}, enName);
},
},
{
label: "关联的技术组件数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
// click: (row) => {
// this.$emit('dialog', '关联的技术组件数量', row)
// },
render: (h, params) => {
let obj = params.statisticsList && params.statisticsList.length > 1 ? params.statisticsList[3] : {}
let enName = obj.statNum || '--'
return h("span", {
style: {
color: '#0b8680',
cursor: 'pointer',
borderBottom: '1px solid #0b8680'
},
on: {
click: () => {
this.$emit('dialog', '关联的技术组件数量', params)
}
}
}, enName);
},
},
],
tableBtnList: [
{
label: "编辑",
type: "primary",
size: "mini",
icon: "el-icon-circle-plus-outline",
click: (row, index) => {
console.log("编辑", row);
},
},
],
data: [],
};
},
mounted() {
this.getList()
},
methods: {
handleName(name,idx) {
let strArr = ['', '']
if(name) {
let str = name.split(',')
strArr[0] = str[str.length - 2]
strArr[1] = str[str.length - 1]
}
return strArr[idx]
},
doLayout() {
this.tableRef.doLayout()
},
async getList() {
const searchFormInfo = this.$refs['searchForm'].formData
let params = { ...this.form, ...searchFormInfo, pageSize: this.pager.size, current: this.pager.current }
this.loading = true
const res = await getTecList(params).catch(() => {
this.pager.total = 0
this.loading = false
})
this.loading = false
if (res.code == 200) {
this.data = res.data?.records
this.pager.total = res.data?.total
}
},
search() {
this.pager.current = 1
this.pager.total = 0
this.getList()
},
reset() {
this.pager.current = 1
this.pager.total = 0
this.form = {
archiTypeId: 2,
}
this.getList()
},
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.usiingServiceWrapper {
width: 100%;
height: 100%;
/deep/ .el-form {
width: 100%;
.el-form-item:last-child {
flex: 1;
justify-content: flex-end;
margin-right: 0;
}
}
.w180 {
width: 180px !important;
}
.btn-box {
height: 38px;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
</style>
\ No newline at end of file
<template>
<div class="comCenterServeList">
<div class="table_container">
<el-tabs v-model="active" @tab-click="handleClick">
<el-tab-pane lazy v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
<component :ref="`${item.name}ref`" :is="item.name" @dialog="openDialog"></component>
</el-tab-pane>
</el-tabs>
</div>
<ComDialog ref="ComDialogRef" />
</div>
</template>
<script>
import ServiceList from './components/serviceList.vue';
import BusinessMsg from './components/businessMsg.vue';
import UsiingService from './components/usiingService.vue';
import DataEntity from './components/dataEntity.vue';
import TechnicalCom from './components/technicalCom.vue';
import ComDialog from './components/comDialog.vue';
export default {
name: 'comCenterServeList',
components: {
ServiceList,
BusinessMsg,
UsiingService,
DataEntity,
TechnicalCom,
ComDialog
},
data() {
return {
tabList: [
{
label: '中台服务清单',
name: 'ServiceList',
},
{
label: '业务信息',
name: 'BusinessMsg',
},
{
label: '应用服务信息',
name: 'UsiingService',
},
{
label: '数据实体信息',
name: 'DataEntity',
},
{
label: '技术组件信息',
name: 'TechnicalCom',
}
],
active: "ServiceList",
};
},
mounted() {
},
methods: {
openDialog(title, row) {
console.log(title, row)
let params = { title, row }
this.$refs.ComDialogRef.open(params)
},
handleClick(tab) {
this.active = tab.name;
// 解决列表fixed样式错乱
this.$nextTick(() => {
this.$refs[`${tab.name}ref`][0].doLayout()
})
},
}
}
</script>
<style lang="scss" scoped>
.form_item_container {
display: flex;
flex-wrap: wrap;
}
/deep/ .el-tabs__header {
margin: 0;
}
.el-form-item {
display: flex;
width: 33%;
}
.cross1 {
width: 100%;
}
/deep/ .cross1>.el-form-item__content {
width: 86.4% !important;
}
.comCenterServeList {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.dialog_content_1 {
display: flex;
justify-content: space-between;
}
.el-button--primary {
background: rgba(13, 134, 127, 0.1);
color: #0D867F;
border: 0;
}
.add_select_item_icon_container {
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/deep/ .el-dialog__header {
background-color: #0D867F;
text-align: left;
}
/deep/ .el-input-group__append {
background-color: #0D867F;
color: #fff;
cursor: pointer;
}
/deep/ .el-dialog__title {
color: #fff;
}
/deep/ .el-dialog__close {
color: #fff;
}
.search_menu {
display: flex;
justify-content: space-between;
}
.search_menu_item_container {
display: flex;
align-items: center;
}
.search_menu_btn_container {
display: flex;
align-items: center;
}
.search_menu_item {
display: flex;
align-items: center;
width: 344px;
}
.search_title {
/* width: 20%; */
flex-shrink: 0;
margin-right: 15px;
}
.search_item {
width: 60%;
}
.search_btn {
width: 100%;
display: flex;
margin-top: 50px;
margin-bottom: 20px;
}
.el-button--default {
border: 0;
}
.shanChu_btn {
color: #DD6A15;
background-color: #F8EBE2;
}
.tingYong_btn {
color: #DEA82A;
background-color: #FDF6E6;
}
.el-button.is-disabled {
color: #C0C4CC !important;
background-color: #fff !important;
}
.add_btn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13, 134, 127, 0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
}
.version_btn {
display: flex;
align-items: center;
justify-content: center;
width: 104px;
height: 32px;
background: rgba(13, 134, 127, 0.1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #0D867F;
cursor: pointer;
margin-left: 15px;
}
.query_btn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(13, 134, 127, 1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #0D867F;
font-size: 14px;
color: #fff;
margin-right: 10px;
cursor: pointer;
}
.reset_btn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 32px;
background: rgba(244, 244, 244, 1);
border-radius: 6px 6px 6px 6px;
border: 1px solid #ccc;
font-size: 14px;
color: #666;
cursor: pointer;
}
.btn_icon {
margin-right: 10px;
}
.table_container {
width: 97%;
height: calc(100% - 40px);
margin-top: 20px;
/deep/ .el-tabs {
height: 100%;
.el-tabs__content {
height: calc(100% - 20px);
}
.el-tab-pane {
height: 100%;
}
}
}
.el-pagination {
margin-top: 30px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #0D867F;
}
.greenButton {
background-color: #0D867F;
color: #fff;
}
</style>
\ No newline at end of file
export const serverTypeOptions = [
{
label: "聚合服务",
value: 1,
},
{
label: "规则服务",
value: 2,
},
{
label: "数据服务",
value: 3,
},
{
label: "原子服务",
value: 4,
},
];
export const archiTypeOptions = [
{
label: "业务架构",
value: 1,
},
{
label: "应用架构",
value: 2,
},
{
label: "数据架构",
value: 3,
},
{
label: "技术架构",
value: 4,
},
{
label: "安全架构",
value: 5,
},
];
export const abilitySourceOptions = [
{
label: "中台服务清单",
value: 1,
},
{
label: "业务信息",
value: 2,
},
{
label: "应用服务信息",
value: 3,
},
{
label: "数据实体信息",
value: 4,
},
{
label: "技术组件信息",
value: 5,
},
];
export const midGroundNameOptions = [
{
label: "项目管理业务中台",
value: "1",
},
{
label: "电网资源业务中台",
value: "2",
},
{
label: "客户服务业务中台",
value: "3",
},
{
label: "财务管理业务中台",
value: "4",
},
];
export const midGroundTypeOptions = [
{
label: "业务中台",
value: "1",
},
{
label: "数据中台",
value: "2",
},
{
label: "技术中台",
value: "3",
},
];
export const stateOptions = [
{
label: "已停用",
value: 0,
},
{
label: "已发布",
value: 1,
},
{
label: "暂存",
value: 2,
},
];
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="50%"
@close="handleClose()"
@open="handleOpen"
>
<div>
<Form
ref="addForm"
:form-options="formOptions"
label-width="120px"
></Form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()" size="mini">取 消</el-button>
<el-button type="primary" @click="handleSubmit()" size="mini" v-if="this.title != '详情'"
>提 交</el-button
>
</span></el-dialog
>
</template>
<script>
import Form from '@/components/Form.vue'
import { addMatterInfo, updMatterInfo } from '@/api'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {},
},
},
data() {
return {}
},
components: {
Form,
},
computed: {
formOptions() {
return [
{
label: '事项名称', // label文字
prop: 'matterName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
readonly: this.title == '详情' ? true : false,
},
{
label: '创建人', // label文字
prop: 'createMan', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
readonly: true,
},
{
label: '创建时间', // label文字
prop: 'createTime', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
placeholder: '请选择', // elementui组件属性
readonly: this.title == '详情' ? true : false,
},
{
label: '事件描述', // label文字
prop: 'matterContent', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
readonly: this.title == '详情' ? true : false,
},
{
label: '备注', // label文字
prop: 'remark', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
readonly: this.title == '详情' ? true : false,
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
isEdit() {
if (this.title === '修改事项') {
return true
} else {
return false
}
},
},
mounted() {},
methods: {
handleSubmit() {
this.$refs['addForm'].onValidate(() => {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
const formInfo = this.$refs['addForm'].getData()
const typeApi = this.isEdit ? updMatterInfo : addMatterInfo
const params = {
...this.rowData,
...formInfo,
state: 2,
}
typeApi(params).then((res) => {
if (res.code === 200) {
loading.close()
this.$message.success('保存成功')
this.showDialog = false
this.handleClose()
this.$emit('querySearch')
}
})
})
},
handleClose() {
this.showDialog = false
this.formOptions.forEach((v) => {
if (v.prop === 'createTime') {
v.initValue = new Date().format('yyyy-MM-dd')
} else {
v.initValue = ''
}
})
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
handleOpen() {
if (Object.keys(this.rowData).length) {
this.formOptions.forEach((v) => {
v.initValue = this.rowData[v.prop]
})
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
})
} else {
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
})
}
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!