Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 7ba0c888 by ‘july-fu’
Options

feat: 企业中台服务清单

1 parent e33fc5d5
Expand all
Inline Side-by-side
Showing with 1653 additions and 0 deletions
src/api/comCenterServeListNew.js 0 → 100644
import { get, post, download } from "@/utils/http";
import {
EADC_ARRCHITECTURE,
EADC_KNOWLEDGE_POOL,
EADC_SHARED_ABILITY,
} from "@/config/micromodule";
export function getServiceList(data) {
return post(EADC_ARRCHITECTURE + "/arc-aby-iy/qryListPage", data);
}
src/mixins/tableMixin.js 0 → 100644
/**
* @param {*} options string|| undefined
*/
export default function tableMixin(options) {
const name = options || "";
let changePageName = `${name}handlerCurrentChange`;
let changeSizeName = `${name}handlerSizeChange`;
let methodsName = `${name}getList`;
let pagerName = `${name}pager`;
let dataName = `${name}data`;
return {
data() {
return {
[dataName]: [],
};
},
mounted() {},
methods: {
[changePageName](page) {
this[pagerName].page = page;
this[methodsName]();
},
[changeSizeName](size) {
this[pagerName].size = size;
this[methodsName]();
},
},
};
}
src/newComponents/ETable/functional.vue 0 → 100644
<script>
export default {
functional: true,
props: {
row: {
type: Object,
required: true,
},
item: {
type: Object,
required: true,
},
},
render(h, ctx) {
//
return ctx.props.item.render(h, ctx.props.row)
},
};
</script>
\ No newline at end of file
src/newComponents/ETable/index.vue 0 → 100644
<template>
<div class="eTableWrapper" :key="tableKey">
<div class="tableHeaderWrapper">
<slot name="header"></slot>
</div>
<div class="controlWrapper">
<div class="title" v-if="title">
<div>{{ title }}</div>
</div>
<div class="operate">
<template v-if="operateList.length">
<el-button v-for="(item, index) in operateList" :key="index" v-bind="filterBtns(item)"
:disabled="checkDisabled(item)" @click="item.click">{{ item.label }}</el-button>
</template>
</div>
</div>
<div class="mainTable">
<el-table ref="mainTableRef" v-bind="$attrs" v-on="$listeners" stripe border>
<el-table-column v-if="selectionList" type="selection" fixed="left" width="55" align="center"
:selectable="selectable"></el-table-column>
<el-table-column v-if="indexMethod !== null" type="index" :index="computedOrder" fixed="left" label="序号"
width="80" align="center"></el-table-column>
<template v-for="(item, index) in columns">
<el-table-column v-if="item.label !== '操作'" :key="index" :label="item.label" v-bind="fiterMethods(item)">
<template slot-scope="scope">
<tableColumnSlot :row="scope.row" :item="item" :index="scope.$index" />
</template>
</el-table-column>
<el-table-column v-else :key="index" fixed="right" :label="item.label" v-bind="fiterMethods(item)">
<template slot-scope="scope">
<el-button v-for="(item, index) in item.tableBtnList" :key="index" v-bind="filterBtns(item)"
:disabled="checkDisabled(item, scope.row, scope.$index)" @click="item.click(scope.row, scope.$index)">{{
item.label }}</el-button>
</template>
</el-table-column>
</template>
<slot name="end"></slot>
</el-table>
</div>
<div class="paginations" v-if="pager && pager.current">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pager.current" :page-sizes="pager.sizes" :page-size="pager.size"
layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
</el-pagination>
</div>
</div>
</template>
<script>
import tableColumnSlot from "./tableColumnSlot.vue";
export default {
name: "ETable",
components: { tableColumnSlot },
props: {
title: {
// tableName
type: String,
default: "",
},
tableKey: {
// single page deffer key
type: String,
default: "",
},
selectionList: {
// mutiple select
type: Array,
},
indexMethod: {
type: Boolean | null, //true 123| false 11,12,13| null
default: null,
},
selectable: {
type: Function | null, //
default: null,
},
operateList: {
//operate
type: Array,
default: () => {
return [
// demo
// {
// label: "新增",
// class:'btns',
// icon:'fa-search',
// size:'small',
// click: () => {
//
// }
// }
];
},
},
columns: {
// table row props
type: Array,
default: () => [
// {
// label: '建设类型', // label文字
// prop: 'buildType', // 字段名
// collectionType: true,
// width: '120px',
// showOverflowTooltip: true,
// align: 'center',
// className: 'btns',
// selectable: () => { },
// fixed: 'left',
// minWidth: 100,
// },
],
},
pager: {
type: Object,
},
},
data() {
return {};
},
mounted() {
this.$emit("update:tableRef", this.$refs.mainTableRef);
},
methods: {
computedOrder(index) {
if (this.indexMethod === true) {
return index + 1;
} else {
return (this.pager.current - 1) * this.pager.size + index + 1;
}
},
// 按钮是否禁用
checkDisabled(item, row, index) {
if (typeof item.disabled === "boolean") {
return item.disabled;
} else if (
Object.prototype.toString.call(item.disabled) === "[object Function]"
) {
return row ? item.disabled(row, index) : item.disabled();
}
},
// 格式错乱主动调用解决
doLayout() {
this.$refs.mainTableRef.doLayout();
},
filterBtns(item) {
const { click, ...others } = item;
return { ...others };
},
// TODO: 是否需要筛选不需要处理的字段
fiterMethods(item) {
const { click, ...others } = item;
return { ...others };
},
handleSizeChange(size) {
this.$emit("sizeChange", size);
},
handleCurrentChange(page) {
this.$emit("currentChange", page);
},
},
};
</script>
<style lang="scss" scoped>
* {
box-sizing: border-box;
}
.eTableWrapper {
width: 100%;
height: 100%;
display: flex;
padding: 0 12px;
flex-direction: column;
.tableHeaderWrapper {
width: 100%;
}
.controlWrapper {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 22px;
padding-bottom: 8px;
position: relative;
text-indent: 6px;
display: flex;
justify-content: flex-start;
align-items: center;
&::before {
display: block;
content: "";
width: 4px;
border-radius: 6px;
background-color: #0d867f;
height: 20px;
}
}
.operate {
flex: 1;
display: flex;
justify-content: flex-end;
padding-bottom: 8px;
align-items: center;
}
}
.mainTable {
width: 100%;
/deep/.el-table__fixed {
height: 100% !important;
}
}
.paginations {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 20px;
margin-bottom: 12px;
}
}
</style>
src/newComponents/ETable/tableColumnSlot.vue 0 → 100644
<template>
<div class="tableCloumnSlotWrapper">
<span v-if="!item.T && !item.render">{{ row[item.prop] || '--' }}</span>
<div :class="row[item.prop] ? 'defaultLink' : ''" v-else-if="item.T == 'a'" :style="item.style"
@click="handlerClick(item.click, row)">{{
row[item.prop] ||
'--' }}</div>
<FuncCom v-else-if="item.render" :item="item" :row="row" />
<el-switch v-else-if="item.T === 'switch'" :value="row[item.prop]" :active-color="item.activeColor || '#13ce66'"
:active-value="item.active" :inactive-value="item.inactive" :inactive-color="item.inactiveColor || '#13ce66'"
@change="item.click(row, index)"></el-switch>
<el-image v-else-if="item.T === 'image'" style="width: 60px; height: 60px" :src="row[item.prop]"
:preview-src-list="[row[item.prop]]">
</el-image>
<el-button v-else-if="item.T === 'button'" :class="item.class || ''" :size="item.size || 'small'"
@click="item.click(row, index)">{{ item.buttonName }}</el-button>
<span v-else :class="item.class || ''" :style="item.style || {}">{{ row[item.prop] || '--' }}</span>
</div>
</template>
<script>
import FuncCom from './functional.vue'
export default {
components: { FuncCom },
props: {
row: {
type: Object,
required: true
},
item: {
type: Object,
required: true
},
index: {
type: Number,
required: true
}
},
methods: {
handlerClick(click, row) {
if (click) {
click(row)
}
}
}
}
</script>
<style scoped>
.defaultLink {
text-decoration: underline;
}
</style>
\ No newline at end of file
src/styles/common.scss
...@@ -124,4 +124,21 @@ $color-primary: #0d867f; ...@@ -124,4 +124,21 @@ $color-primary: #0d867f;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.comDialog {
.el-dialog__header {
background-color: #0d867f;
text-align: left;
}
.el-dialog__title {
color: #fff;
}
.el-dialog__close {
color: #fff;
}
} }
\ No newline at end of file
src/views/comCenterServeListNew/components/businessMsg.vue 0 → 100644
<template>
<div class="businessMsgWrapper">
<ETable ref="ETableRef" title="业务信息列表" :tableRef.sync="tableRef" :height="430" 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";
export default {
name: "businessMsg",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
name: '',
date: '',
typeName: '',
type: ''
},
selectionList: [],
formOptions: [
{
label: "中台服务名称",
prop: "name",
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: "业务活动名称",
},
],
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: 2,
size: 10,
total: 100,
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: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务活动编码",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务流程名称",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务职能",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "业务域",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "关联的业务对象数量",
T: 'a',
prop: "buildType2",
minWidth: 120,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
click: (row) => {
this.$emit('dialog', '关联的业务对象数量', row)
},
},
{
label: "关联的应用服务数量",
T: 'a',
prop: "buildType2",
minWidth: 120,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
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: [{ buildType2: 11 }],
};
},
mounted() { },
methods: {
doLayout() {
this.tableRef.doLayout()
},
getList() {
console.log("getList");
},
reset() { },
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.businessMsgWrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/comCenterServeListNew/components/dataEntity.vue 0 → 100644
<template>
<div class="dataEntityWrapper">
<ETable ref="ETableRef" title="数据实体信息列表" :tableRef.sync="tableRef" :height="430" tableKey="dataEntity" :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";
export default {
name: "dataEntity",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
name: '',
date: '',
typeName: '',
type: ''
},
selectionList: [],
formOptions: [
{
label: "服务名称",
prop: "name",
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: 2,
size: 10,
total: 100,
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: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "物理实体英文名称",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "物理实体编码",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "逻辑实体",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "概念实体",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
],
tableBtnList: [
{
label: "编辑",
type: "primary",
size: "mini",
icon: "el-icon-circle-plus-outline",
click: (row, index) => {
console.log("编辑", row);
},
},
],
data: [{ buildType2: 11 }],
};
},
mounted() { },
methods: {
doLayout() {
this.tableRef.doLayout()
},
getList() {
console.log("getList");
},
reset() { },
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.dataEntityWrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/comCenterServeListNew/components/editService.vue 0 → 100644
<template>
<el-dialog :title="title" custom-class="comDialog" :visible.sync="show" :center="false" :close-on-click-modal="false"
width="80%" @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="serveType">
<el-select class="w180" v-model="form.serveType" placeholder="请选择">
<el-option v-for="item in serverTypeOptions" :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="content">
<el-select class="w180" v-model="value" placeholder="请选择">
<el-option v-for="item in options" :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="content">
<el-input class="w180" type="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入内容"
v-model="form.content"></el-input>
</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>
<el-button type="primary" @click="submit">发 布</el-button>
</span>
</el-dialog>
</template>
<script>
import { serverTypeOptions, abilitySourceOptions, midGroundNameOptions, midGroundTypeOptions } from '../options.js'
export default {
data() {
return {
serverTypeOptions,
abilitySourceOptions,
midGroundNameOptions,
midGroundTypeOptions,
show: false,
title: "新增",
form: {
abilityCode: undefined, // 中台服务编码 false
abilityName: undefined, // 中台服务名称 false
},
rules: {},
};
},
methods: {
close() {
this.show = false;
},
open(row) {
row ? (this.form = { ...row }) : "";
this.show = true;
},
submit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$emit("submit");
this.close();
} else {
return false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.w180 {
width: 180px;
}
</style>
src/views/comCenterServeListNew/components/technicalCom.vue 0 → 100644
<template>
<div class="technicalComWrapper">
<ETable ref="ETableRef" title="技术组件信息列表" :tableRef.sync="tableRef" :height="430" tableKey="technicalCom"
: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";
export default {
name: "technicalCom",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
name: '',
date: '',
typeName: '',
type: ''
},
selectionList: [],
formOptions: [
{
label: "服务名称",
prop: "name",
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: "基础组件名称",
},
],
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: 2,
size: 10,
total: 100,
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: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "基础组件编码",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "技术平台",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "支撑的系统数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
click: (row) => {
this.$emit('dialog', '支撑的系统数量', row)
},
},
{
label: "支撑的数据服务数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
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: [{ buildType2: 11 }],
};
},
mounted() { },
methods: {
doLayout() {
this.tableRef.doLayout()
},
getList() {
console.log("getList");
},
reset() { },
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.technicalComWrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/comCenterServeListNew/components/usiingService.vue 0 → 100644
<template>
<div class="usiingServiceWrapper">
<ETable ref="ETableRef" title="应用服务列表" :tableRef.sync="tableRef" :height="430" tableKey="usiingService" :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";
export default {
name: "usiingService",
components: { SearchForm, ETable },
mixins: [tableMixin()],
data() {
return {
loading: false,
tableRef: null,
form: {
name: '',
date: '',
typeName: '',
type: ''
},
selectionList: [],
formOptions: [
{
label: "中台服务名称",
prop: "name",
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: 2,
size: 10,
total: 100,
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: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "应用活动编码",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "功能模块",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "系统应用",
prop: "buildType2",
minWidth: 120,
showOverflowTooltip: true,
align: "center",
},
{
label: "关联的业务对象数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
click: (row) => {
this.$emit('dialog', '关联的业务对象数量', row)
},
},
{
label: "关联的业务活动数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
click: (row) => {
this.$emit('dialog', '关联的业务活动数量', row)
},
},
{
label: "关联的物理实体数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
click: (row) => {
this.$emit('dialog', '关联的物理实体数量', row)
},
},
{
label: "关联的技术组件数量",
T: 'a',
prop: "buildType2",
minWidth: 140,
align: "center",
style: { color: '#0b8680', cursor: 'pointer' },
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: [{ buildType2: 11 }],
};
},
mounted() { },
methods: {
doLayout() {
this.tableRef.doLayout()
},
getList() {
console.log("getList");
},
reset() { },
handleSelectionChange(val) {
this.selectionList = val;
},
showClick(val) {
console.log("showClick", val);
}
},
};
</script>
<style lang="scss" scoped>
.usiingServiceWrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/views/comCenterServeListNew/index.vue 0 → 100644
<template>
<div class="comCenterServeList">
<div class="table_container">
<el-tabs v-model="active" @tab-click="handleClick">
<el-tab-pane 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 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
src/views/comCenterServeListNew/options.js 0 → 100644
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: "项目管理业务中台",
},
{
label: "电网资源业务中台",
value: "电网资源业务中台",
},
{
label: "客户服务业务中台",
value: "客户服务业务中台",
},
{
label: "财务管理业务中台",
value: "财务管理业务中台",
},
];
export const midGroundTypeOptions = [
{
label: "业务中台",
value: "业务中台",
},
{
label: "数据中台",
value: "数据中台",
},
{
label: "技术中台",
value: "技术中台",
},
];
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!