Skip to content

A
agcs2.0-web
Commit c156c399 authored by liang's avatar liang
Browse files
Options

数据库-字段配置

parent 079f5808
Expand all Show whitespace changes
Inline Side-by-side
Showing with 589 additions and 827 deletions
packages/WidgetConfig copy.vue deleted 100644 → 0
View file @ 079f5808
This diff is collapsed.
packages/WidgetConfig.vue
View file @ c156c399
......@@ -40,9 +40,6 @@
:disabled="propNotEdit"
></el-input>
</el-form-item>
<el-form-item label="数据库">
<el-input :value="data.tableCode" clearable disabled></el-input>
</el-form-item>
<el-form-item label="标题">
<el-input
v-model="data.label"
......
packages/WidgetFormItem copy.vue deleted 100644 → 0
View file @ 079f5808
<template>
<div>
<span
v-if="item.type == 'title'"
:style="item.styles"
style="margin-left: 5px"
>
{{ item.value }}
</span>
<component
v-else
:is="getComponent(item.type, item.component)"
v-bind="
Object.assign(deepClone(item), params, { size: item.size || 'small' })
"
:multiple="false"
:placeholder="item.placeholder || getPlaceholder(item)"
:dic="item.dicData"
:value="
['time', 'timerange', 'checkbox'].includes(item.type)
? item.dicData
: undefined
"
>
<span v-if="params.html" v-html="params.html"></span>
</component>
</div>
</template>
<script>
export default {
name: "widget-form-item",
props: {
item: {
type: Object,
default: () => {
return {}
},
},
params: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
form: {},
}
},
methods: {
getComponent(type, component) {
let KEY_COMPONENT_NAME = "avue-"
let result = "input"
if (component) return component
else if (["array", "img", "url"].includes(type)) result = "array"
else if (type === "select") result = "select"
else if (type === "radio") result = "radio"
else if (type === "checkbox") result = "checkbox"
else if (["time", "timerange"].includes(type)) result = "time"
else if (
[
"dates",
"date",
"datetime",
"datetimerange",
"daterange",
"week",
"month",
"year",
].includes(type)
)
result = "date"
else if (type === "cascader") result = "cascader"
else if (type === "number") result = "input-number"
else if (type === "password") result = "input"
else if (type === "switch") result = "switch"
else if (type === "rate") result = "rate"
else if (type === "upload") result = "upload"
else if (type === "slider") result = "slider"
else if (type === "dynamic") result = "dynamic"
else if (type === "icon") result = "input-icon"
else if (type === "color") result = "input-color"
else if (type === "map") result = "input-map"
return KEY_COMPONENT_NAME + result
},
getPlaceholder(item) {
const label = item.label
if (
[
"select",
"checkbox",
"radio",
"tree",
"color",
"dates",
"date",
"datetime",
"datetimerange",
"daterange",
"week",
"month",
"year",
"map",
"icon",
].includes(item.type)
)
return `请选择 ${label}`
else return `请输入 ${label}`
},
},
}
</script>
src/api/database.js
View file @ c156c399
import request from "@/utils/request"
import { add } from "lodash"
/* 数据库管理 */
......@@ -10,6 +11,14 @@ export function getDbPage(params = {}) {
})
}
export function getDbList(params = {}) {
return request({
url: "/cloud-upms/sys/db/info/list",
method: "get",
params,
})
}
export function addDb(data = {}) {
return request({
url: "/cloud-upms/sys/db/info",
......@@ -26,3 +35,21 @@ export function testDb(data = {}) {
data,
})
}
// 根据数据库id 查数据表
export function getTableList(id) {
return request({
url: `/cloud-upms/sys/table/list?dbId=${id}`,
method: "get",
})
}
// 新增数据表
export function addDbTable(data = {}) {
return request({
url: "/cloud-upms/sys/table",
method: "post",
data,
})
}
src/api/field.js
View file @ c156c399
......@@ -12,6 +12,14 @@ export function getFieldPage(params = {}) {
params,
})
}
export function getFieldList(params = {}) {
return request({
url: "/cloud-upms/field/dict/list/table",
method: "get",
params,
})
}
export function delField(id) {
return request({
url: `/cloud-upms/field/dict/${id}`,
......
src/components/DialogComponents/Form.vue
View file @ c156c399
......@@ -490,9 +490,6 @@ export default {
text-align: center;
}
}
.el-input-group__prepend {
padding: 0;
}
.input-with-input {
.el-input-group__prepend {
background-color: #ffffff;
......
src/views/systems/database/index.vue
View file @ c156c399
......@@ -75,13 +75,13 @@ export default {
columns: [
{
label: "数据库名称",
minWidth: 120,
minWidth: 180,
value: "dbName",
},
{
label: "库表前缀",
minWidth: 80,
value: "prefix",
label: "数据源名称",
minWidth: 120,
value: "name",
},
{
......@@ -103,6 +103,12 @@ export default {
return this.$handle.formatDicList(this.dictMap["db_type"], row.type)
},
},
{
label: "库表前缀",
minWidth: 80,
value: "prefix",
},
{
label: "内网url",
minWidth: 120,
......@@ -164,20 +170,11 @@ export default {
rules: [{ required: true, message: "请输入数据库名称" }],
spanCount: 12,
},
{
type: "input",
label: "库表前缀",
placeholder: "请输入库表前缀",
prop: "prefix",
rules: [{ required: true, message: "请输入库表前缀" }],
spanCount: 12,
},
{
type: "input",
label: "数据源名称",
placeholder: "请输入数据源名称",
prop: "dbName",
prop: "name",
rules: [{ required: true, message: "请输入数据源名称" }],
spanCount: 12,
},
......@@ -191,6 +188,15 @@ export default {
},
spanCount: 12,
},
{
type: "input",
label: "库表前缀",
placeholder: "请输入库表前缀",
prop: "prefix",
rules: [{ required: true, message: "请输入库表前缀" }],
spanCount: 12,
},
{
type: "select",
label: "数据源类型",
......
src/views/systems/field-config/FieldList.vue 0 → 100644
View file @ c156c399
<template>
<div class="container">
<direct-search
ref="form"
:label-position="'right'"
:forms="searchList"
:style="{ textAlign: 'left' }"
@handleSearch="handleFormSearch"
/>
<el-table-self
ref="table"
:table-data="tableData"
:columns="columns"
:list-loading="listLoading"
/>
<el-drawer
:title="widgetFormSelect.id ? '编辑' : '新增'"
:visible.sync="widgetVisible"
:size="500"
:wrapperClosable="false"
>
<div class="drawer__container">
<div class="drawer__content">
<widget-config
:data="widgetFormSelect"
:propNotEdit="propNotEdit"
layout-hidden
>
<template v-slot:dbtable>
<el-collapse-item
name="4"
title="数据库属性与命名标准"
v-if="!['group', 'title'].includes(widgetFormSelect.type)"
>
<el-form-item label="数据类型">
<el-select
v-model="widgetFormSelect.fieldType"
placeholder="字段存储类型"
style="width: 100%"
clearable
>
<el-option
:label="item.label"
:value="item.value"
v-for="item in dictMap['data_type']"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据宽度">
<el-input
style="width: 100%"
v-model="widgetFormSelect.fieldLength"
:controls="false"
clearable
placeholder="数据宽度"
></el-input>
</el-form-item>
<el-form-item label="数据元标识">
<el-input
v-model="widgetFormSelect.hisElementIdent"
clearable
placeholder="数据元标识"
></el-input>
</el-form-item>
<el-form-item label="数据元值类型">
<el-input
v-model="widgetFormSelect.hisDataType"
clearable
placeholder="数据元值类型"
></el-input>
</el-form-item>
<el-form-item label="表达格式">
<el-input
v-model="widgetFormSelect.hisRepresentFormat"
clearable
placeholder="表达格式"
></el-input>
</el-form-item>
<el-form-item label="允许值">
<el-input
v-model="widgetFormSelect.hisAllowance"
clearable
placeholder="允许值"
></el-input>
</el-form-item>
</el-collapse-item>
</template>
</widget-config>
</div>
<div class="footer">
<el-button @click="widgetVisible = false" size="large"
>取 消</el-button
>
<el-button
size="large"
type="primary"
:loading="loading"
@click="handleConfirm(widgetFormSelect)"
>确 定</el-button
>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import WidgetConfig from "packages/WidgetConfig.vue"
import { getFieldList, addField, delField } from "@/api/field.js"
// 新增所需字段
const fields = [
"id",
"fieldType",
"label",
"prop",
"fieldLength",
"hisElementIdent",
"hisDataType",
"hisRepresentFormat",
"hisAllowance",
]
// 字段关系映射
const fieldMap = {
label: "fieldName",
prop: "fieldCode",
}
export default {
name: "FieldList",
props: {
tableCode: {},
tableId: {},
dbId: {},
},
components: {
WidgetConfig,
},
data() {
return {
propNotEdit: false,
loading: false,
widgetVisible: false,
widgetFormSelect: {},
listLoading: false,
// 查询列表
searchList: [
{
label: "字段名",
type: "input",
prop: "fieldName",
placeholder: "请输入字段名",
},
{
label: "属性值",
type: "input",
prop: "fieldCode",
placeholder: "请输入属性值",
},
{
type: "button",
value: "查询",
icon: "el-icon-search",
},
{
type: "button",
color: "primary",
icon: "el-icon-plus",
hasForm: true,
value: "添加",
func: this.handleAdd,
},
],
columns: [
{
label: "字段名",
minWidth: 120,
value: "fieldName",
},
{
label: "属性值",
minWidth: 120,
value: "fieldCode",
},
{
label: "数据库存储表名称",
minWidth: 120,
value: "tableName",
},
{
label: "数据库存字段类型",
minWidth: 120,
value: "fieldType",
formatter: (row) => {
return this.$handle.formatDicList(
this.dictMap["data_type"],
row.fieldType
)
},
},
{
label: "数据宽度",
minWidth: 100,
value: "fieldLength",
},
{
label: "操作",
width: 200,
fixed: "right",
operType: "button",
operations: [
{
func: this.handleAdd,
formatter({ isDefault }) {
return {
disabled: isDefault === 1,
label: "编辑",
type: "primary",
}
},
},
{
func: this.handleDel,
formatter({ isDefault }) {
return {
disabled: isDefault === 1,
label: "删除",
type: "warning",
}
},
},
],
},
],
tableData: [],
cacheForm: {},
}
},
watch: {
tableCode(val) {
if (val) {
this.handleFormSearch()
} else {
this.tableData = []
}
},
},
methods: {
handleAdd({ id, jsonStr, tableCode }) {
if (!this.tableCode) {
this.$message.error("未选择数据表")
return
}
const fields = jsonStr ? JSON.parse(jsonStr) : {}
const form = id ? { id, ...fields } : { tableCode, importantField: true }
this.propNotEdit = Boolean(id)
this.widgetFormSelect = Object.assign(
{ type: "input", display: true },
form
)
this.widgetVisible = true
},
handleConfirm(form) {
if (!/^[a-z]+([a-z0-9]*([_]?[a-z]+)*)*$/.test(form.prop)) {
this.$message.error(
"只能包含字母、数字、下划线。必须以字母开始，下划线不可连续重复，下划线后不可紧跟着数字，不能以数字、下划线结束"
)
return
}
const data = {
jsonStr: JSON.stringify(form),
dbId: this.dbId,
tableId: this.tableId,
}
Object.keys(form).forEach((key) => {
if (fields.includes(key)) {
if (fieldMap[key]) {
data[fieldMap[key]] = form[key]
} else {
data[key] = form[key]
}
}
})
const msg = data.id ? "编辑成功" : "新增成功"
this.loading = true
addField(data)
.then((res) => {
if (res.code === 1) {
this.$message.success(msg)
this.handleSearch()
// this.widgetVisible = false
this.loading = false
}
})
.catch((e) => {
this.loading = false
})
},
handleDel(row) {
this.$confirm(`是否删除【${row.fieldName}】?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
delField(row.id).then((res) => {
if (res.code === 1) {
this.$message({
type: "success",
message: "删除成功!",
})
this.handleSearch()
}
})
})
.catch(() => {})
},
// 查询
handleFormSearch(form) {
this.pageIndex = 1
this.handleSearch(form)
},
handleSearch(form) {
this.cacheForm = Object.assign(this.cacheForm, form)
this.listLoading = true
const params = Object.assign(
{
tableCode: this.tableCode,
},
this.cacheForm
)
for (let key in params) {
if (params[key] === "") {
delete params[key]
}
}
getFieldList(params).then((res) => {
this.listLoading = false
this.tableData = res.data || []
})
},
},
}
</script>
<style lang="scss" scoped>
.drawer__container {
padding: 0 20px;
.drawer__content {
height: calc(100vh - #{"160px"});
overflow-y: auto;
::v-deep .el-input-number {
width: 100%;
}
&::-webkit-scrollbar {
width: 0px;
height: 0px;
}
&::-webkit-scrollbar-thumb {
background-color: #fff;
}
}
.footer {
margin-top: 20px;
display: flex;
button {
flex: 1;
}
}
}
</style>
src/views/systems/field-config/index.vue
View file @ c156c399
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment