Skip to content

S
saas-manage
Commit 9574485a by qinjianhui
Options

feat: 修改

parent bae51d16
Showing with 225 additions and 57 deletions
public/index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= BASE_URL %>config.js"></script> <script src="<%= BASE_URL %>config.js"></script>
</head> </head>
......
src/common/components/element-ui.js
...@@ -69,6 +69,5 @@ export default { ...@@ -69,6 +69,5 @@ export default {
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$prompt = MessageBox.prompt
// Vue.prototype.$message = MessageBox.message
}, },
} }
src/views/saasManage/indexPage.vue
...@@ -102,7 +102,10 @@ ...@@ -102,7 +102,10 @@
border border
width="100%" width="100%"
height="100%" height="100%"
:highlight-current-row="true"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@row-click="rowClick"
header-row-class-name="header-row-class-name"
> >
<el-table-column <el-table-column
type="selection" type="selection"
...@@ -142,31 +145,37 @@ ...@@ -142,31 +145,37 @@
label="公司名称" label="公司名称"
prop="companyName" prop="companyName"
header-align="center" header-align="center"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="负责人" label="负责人"
prop="headName" prop="headName"
header-align="center" header-align="center"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="联系电话" label="联系电话"
prop="contactPhone" prop="contactPhone"
header-align="center" header-align="center"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="套餐" label="套餐"
prop="packages" prop="packages"
header-align="center" header-align="center"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="资费" label="资费"
prop="charges" prop="charges"
header-align="center" header-align="center"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="数据库地址" label="数据库地址"
prop="dataHost" prop="dataHost"
header-align="center" header-align="center"
align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
label="数据库名称" label="数据库名称"
...@@ -208,6 +217,7 @@ ...@@ -208,6 +217,7 @@
:total="total" :total="total"
:page-size="pageSize" :page-size="pageSize"
:current-page="currentPage" :current-page="currentPage"
@size-change="sizeChange"
@current-change="onCurrentChange" @current-change="onCurrentChange"
> >
</el-pagination> </el-pagination>
...@@ -223,7 +233,7 @@ ...@@ -223,7 +233,7 @@
size="small" size="small"
ref="form" ref="form"
:inline="true" :inline="true"
label-width="100px" label-width="110px"
label-position="right" label-position="right"
> >
<el-form-item <el-form-item
...@@ -234,11 +244,15 @@ ...@@ -234,11 +244,15 @@
]" ]"
> >
<el-input <el-input
style="width: 220px" style="width: 200px"
v-model="editForm.domain" v-model="editForm.domain"
size="small" size="small"
clearable
@change="onChange"
placeholder="请输入域名" placeholder="请输入域名"
/> >
<template slot="append">.joshine.cn</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="状态" label="状态"
...@@ -248,8 +262,9 @@ ...@@ -248,8 +262,9 @@
]" ]"
> >
<el-select <el-select
style="width: 220px" style="width: 200px"
v-model="editForm.status" v-model="editForm.status"
clearable
placeholder="请选择状态" placeholder="请选择状态"
> >
<el-option <el-option
...@@ -263,6 +278,148 @@ ...@@ -263,6 +278,148 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="二级域名"
prop="customDomain"
:rules="[
{ required: true, message: '请输入二级域名' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.customDomain"
placeholder="请输入二级域名"
size="small"
clearable
></el-input>
</el-form-item>
<el-form-item
label="Api Name"
prop="apiName"
:rules="[
{ required: true, message: '请输入Api Name' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.apiName"
placeholder="请输入Api Name"
size="small"
disabled
clearable
></el-input>
</el-form-item>
<el-form-item
label="数据库类型"
prop="databaseType"
:rules="[
{ required: true, message: '请输入数据库类型' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据库类型"
v-model="editForm.databaseType"
clearable
/>
</el-form-item>
<el-form-item
label="数据源地址"
prop="dataHost"
:rules="[
{ required: true, message: '请输入数据源地址' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据源地址"
v-model="editForm.dataHost"
clearable
/>
</el-form-item>
<el-form-item
label="数据源端口"
prop="dataPort"
:rules="[
{ required: true, message: '请输入数据源端口' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据源端口"
v-model="editForm.dataPort"
clearable
/>
</el-form-item>
<el-form-item
label="数据库名称"
prop="databaseName"
:rules="[
{ required: true, message: '请输入数据库名称' },
]"
>
<el-input
style="width: 200px"
v-model="editForm.databaseName"
size="small"
disabled
placeholder="请输入数据库名称"
>
<template slot="prepend">saas_</template>
</el-input>
</el-form-item>
<el-form-item
label="数据库用户名"
prop="databaseUserName"
:rules="[
{
required: true,
message: '请输入数据库用户名',
},
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据库用户名"
v-model="editForm.databaseUserName"
clearable
/>
</el-form-item>
<el-form-item
label="数据库密码"
prop="databasePwd"
:rules="[
{ required: true, message: '请输入数据库密码' },
]"
>
<el-input
size="small"
style="width: 200px"
placeholder="请输入数据库密码"
v-model="editForm.databasePwd"
clearable
/>
</el-form-item>
<el-form-item
label="过期时间"
prop="expireTime"
:rules="[
{ required: true, message: '请选择过期时间' },
]"
>
<el-date-picker
style="width: 200px"
v-model="editForm.expireTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
<el-form-item
label="公司名称" label="公司名称"
prop="companyName" prop="companyName"
:rules="[ :rules="[
...@@ -270,7 +427,7 @@ ...@@ -270,7 +427,7 @@
]" ]"
> >
<el-input <el-input
style="width: 220px" style="width: 200px"
v-model="editForm.companyName" v-model="editForm.companyName"
size="small" size="small"
placeholder="请输入公司名称" placeholder="请输入公司名称"
...@@ -284,7 +441,7 @@ ...@@ -284,7 +441,7 @@
]" ]"
> >
<el-input <el-input
style="width: 220px" style="width: 200px"
v-model="editForm.headName" v-model="editForm.headName"
size="small" size="small"
placeholder="负责人" placeholder="负责人"
...@@ -295,10 +452,11 @@ ...@@ -295,10 +452,11 @@
prop="contactPhone" prop="contactPhone"
:rules="[ :rules="[
{ required: true, message: '请输入联系电话' }, { required: true, message: '请输入联系电话' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码格式', trigger: 'blur' },
]" ]"
> >
<el-input <el-input
style="width: 220px" style="width: 200px"
v-model="editForm.contactPhone" v-model="editForm.contactPhone"
size="small" size="small"
placeholder="请输入联系电话" placeholder="请输入联系电话"
...@@ -312,7 +470,7 @@ ...@@ -312,7 +470,7 @@
]" ]"
> >
<el-input <el-input
style="width: 220px" style="width: 200px"
v-model="editForm.packages" v-model="editForm.packages"
size="small" size="small"
placeholder="请输入套餐" placeholder="请输入套餐"
...@@ -322,54 +480,16 @@ ...@@ -322,54 +480,16 @@
label="资费" label="资费"
prop="charges" prop="charges"
:rules="[ :rules="[
{ required: true, message: '请输入套餐' }, { required: true, message: '请输入资费' },
]" ]"
> >
<el-input <el-input
style="width: 220px" style="width: 200px"
v-model="editForm.charges" v-model="editForm.charges"
size="small" size="small"
placeholder="请输入套餐" placeholder="请输入资费"
/>
</el-form-item>
<el-form-item
label="数据库地址"
prop="dataHost"
:rules="[
{ required: true, message: '请输入数据库地址' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.dataHost"
size="small"
placeholder="请输入套餐"
/> />
</el-form-item> </el-form-item>
<el-form-item
label="数据库名称"
prop="databaseName"
:rules="[
{ required: true, message: '请输入数据库名称' },
]"
>
<el-input
style="width: 220px"
v-model="editForm.databaseName"
size="small"
placeholder="请输入套餐"
/>
</el-form-item>
<el-form-item label="过期时间" prop="expireTime">
<el-date-picker
style="width: 220px"
v-model="editForm.expireTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
</el-form> </el-form>
<span slot="footer"> <span slot="footer">
<el-button @click="addVisible = false" size="small" <el-button @click="addVisible = false" size="small"
...@@ -406,16 +526,23 @@ export default { ...@@ -406,16 +526,23 @@ export default {
currentPage: 1, currentPage: 1,
addVisible: false, addVisible: false,
selection: [], selection: [],
cloneEditForm: {},
} }
}, },
async created() { async created() {
this.cloneEditForm = JSON.parse(
JSON.stringify(this.editForm),
)
this.getList() this.getList()
}, },
methods: { methods: {
onChange(e) {
this.$set(this.editForm, 'apiName', e)
this.$set(this.editForm, 'databaseName', e)
},
async getList() { async getList() {
const l = this.$loading({ const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)', background: 'rgba(0, 0, 0, 0.3)',
text: '加载中',
}) })
try { try {
const res = await getManageData( const res = await getManageData(
...@@ -429,9 +556,8 @@ export default { ...@@ -429,9 +556,8 @@ export default {
) )
this.manageData = res.data.records this.manageData = res.data.records
this.total = res.data.total this.total = res.data.total
console.log('dddd', this.manageData)
} catch (e) { } catch (e) {
console.log(e) console.error(e)
} finally { } finally {
l.close() l.close()
} }
...@@ -442,7 +568,9 @@ export default { ...@@ -442,7 +568,9 @@ export default {
addData() { addData() {
this.addVisible = true this.addVisible = true
this.editId = undefined this.editId = undefined
this.searchForm = {} this.editForm = JSON.parse(
JSON.stringify(this.cloneEditForm),
)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.form.clearValidate() this.$refs.form.clearValidate()
}) })
...@@ -454,6 +582,11 @@ export default { ...@@ -454,6 +582,11 @@ export default {
}) })
try { try {
const res = await getDataById(row.id) const res = await getDataById(row.id)
res.data.domain =
res.data.domain && res.data.domain.split('.')[0]
res.data.databaseName =
res.data.databaseName &&
res.data.databaseName.split('_')[1]
this.editForm = res.data this.editForm = res.data
} catch (e) { } catch (e) {
this.$message.danger(e) this.$message.danger(e)
...@@ -471,6 +604,10 @@ export default { ...@@ -471,6 +604,10 @@ export default {
const l = this.$loading({ const l = this.$loading({
background: 'rgba(0, 0, 0, 0.3)', background: 'rgba(0, 0, 0, 0.3)',
}) })
this.editForm.databaseName =
'saas_' + this.editForm.databaseName
this.editForm.domain =
this.editForm.domain + '.joshine.cn'
try { try {
if (this.editId) { if (this.editId) {
const res = await updateManageData(this.editForm) const res = await updateManageData(this.editForm)
...@@ -480,7 +617,6 @@ export default { ...@@ -480,7 +617,6 @@ export default {
} }
} else { } else {
const res = await addManageData(this.editForm) const res = await addManageData(this.editForm)
console.log(res)
if (res.code === 200) { if (res.code === 200) {
this.$message.success(res.message) this.$message.success(res.message)
this.getList() this.getList()
...@@ -494,6 +630,10 @@ export default { ...@@ -494,6 +630,10 @@ export default {
} }
}, },
async deleteData() { async deleteData() {
if (this.selection.length === 0) {
this.$message.error('请至少选择一条记录')
return
}
let ids = [] let ids = []
ids = this.selection.map((item) => item.id) ids = this.selection.map((item) => item.id)
ids = ids.join() ids = ids.join()
...@@ -512,7 +652,24 @@ export default { ...@@ -512,7 +652,24 @@ export default {
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.selection = selection this.selection = selection
}, },
onCurrentChange() {}, onCurrentChange(currentPage) {
this.currentPage = currentPage
this.getList()
},
sizeChange(pageSize) {
this.pageSize = pageSize
this.getList()
},
rowClick(row) {
if (this.selection.length === 1 && this.selection[0] === row) {
this.selection = []
this.$refs.table.clearSelection()
} else {
this.selection = [row]
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(row, true)
}
},
}, },
} }
</script> </script>
...@@ -548,6 +705,18 @@ export default { ...@@ -548,6 +705,18 @@ export default {
.el-dialog__body { .el-dialog__body {
padding: 10px 20px; padding: 10px 20px;
} }
.el-icon-edit:before {
color: #ff9800;
font-weight: bold;
}
.el-range-editor--small .el-range-separator {
line-height: 31px;
}
.header-row-class-name th {
background-color: #f8f8f9;
}
} }
} }
......
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