feat: 修改

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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>
     <script src="<%= BASE_URL %>config.js"></script>
   </head>

src/common/components/element-ui.js

@@ -69,6 +69,5 @@ export default {
     Vue.prototype.$alert = MessageBox.alert
     Vue.prototype.$confirm = MessageBox.confirm
     Vue.prototype.$prompt = MessageBox.prompt
-    // Vue.prototype.$message = MessageBox.message
   },
 }

src/views/saasManage/indexPage.vue

@@ -102,7 +102,10 @@
         border
         width="100%"
         height="100%"
+        :highlight-current-row="true"
         @selection-change="handleSelectionChange"
+        @row-click="rowClick"
+        header-row-class-name="header-row-class-name"
       >
         <el-table-column
           type="selection"
@@ -142,31 +145,37 @@
           label="公司名称"
           prop="companyName"
           header-align="center"
+          align="center"
         ></el-table-column>
         <el-table-column
           label="负责人"
           prop="headName"
           header-align="center"
+          align="center"
         ></el-table-column>
         <el-table-column
           label="联系电话"
           prop="contactPhone"
           header-align="center"
+          align="center"
         ></el-table-column>
         <el-table-column
           label="套餐"
           prop="packages"
           header-align="center"
+          align="center"
         ></el-table-column>
         <el-table-column
           label="资费"
           prop="charges"
           header-align="center"
+          align="center"
         ></el-table-column>
         <el-table-column
           label="数据库地址"
           prop="dataHost"
           header-align="center"
+          align="center"
         ></el-table-column>
         <el-table-column
           label="数据库名称"
@@ -208,6 +217,7 @@
         :total="total"
         :page-size="pageSize"
         :current-page="currentPage"
+        @size-change="sizeChange"
         @current-change="onCurrentChange"
       >
       </el-pagination>
@@ -223,7 +233,7 @@
         size="small"
         ref="form"
         :inline="true"
-        label-width="100px"
+        label-width="110px"
         label-position="right"
       >
         <el-form-item
@@ -234,11 +244,15 @@
           ]"
         >
           <el-input
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.domain"
             size="small"
+            clearable
+            @change="onChange"
             placeholder="请输入域名"
-          />
+          >
+            <template slot="append">.joshine.cn</template>
+          </el-input>
         </el-form-item>
         <el-form-item
           label="状态"
@@ -248,8 +262,9 @@
           ]"
         >
           <el-select
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.status"
+            clearable
             placeholder="请选择状态"
           >
             <el-option
@@ -263,6 +278,148 @@
           </el-select>
         </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="公司名称"
           prop="companyName"
           :rules="[
@@ -270,7 +427,7 @@
           ]"
         >
           <el-input
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.companyName"
             size="small"
             placeholder="请输入公司名称"
@@ -284,7 +441,7 @@
           ]"
         >
           <el-input
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.headName"
             size="small"
             placeholder="负责人"
@@ -295,10 +452,11 @@
           prop="contactPhone"
           :rules="[
             { required: true, message: '请输入联系电话' },
+            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码格式', trigger: 'blur' },
           ]"
         >
           <el-input
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.contactPhone"
             size="small"
             placeholder="请输入联系电话"
@@ -312,7 +470,7 @@
           ]"
         >
           <el-input
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.packages"
             size="small"
             placeholder="请输入套餐"
@@ -322,54 +480,16 @@
           label="资费"
           prop="charges"
           :rules="[
-            { required: true, message: '请输入套餐' },
+            { required: true, message: '请输入资费' },
           ]"
         >
           <el-input
-            style="width: 220px"
+            style="width: 200px"
             v-model="editForm.charges"
             size="small"
-            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="请输入套餐"
+            placeholder="请输入资费"
           />
         </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>
       <span slot="footer">
         <el-button @click="addVisible = false" size="small"
@@ -406,16 +526,23 @@ export default {
       currentPage: 1,
       addVisible: false,
       selection: [],
+      cloneEditForm: {},
     }
   },
   async created() {
+    this.cloneEditForm = JSON.parse(
+      JSON.stringify(this.editForm),
+    )
     this.getList()
   },
   methods: {
+    onChange(e) {
+      this.$set(this.editForm, 'apiName', e)
+      this.$set(this.editForm, 'databaseName', e)
+    },
     async getList() {
       const l = this.$loading({
         background: 'rgba(0, 0, 0, 0.3)',
-        text: '加载中',
       })
       try {
         const res = await getManageData(
@@ -429,9 +556,8 @@ export default {
         )
         this.manageData = res.data.records
         this.total = res.data.total
-        console.log('dddd', this.manageData)
       } catch (e) {
-        console.log(e)
+        console.error(e)
       } finally {
         l.close()
       }
@@ -442,7 +568,9 @@ export default {
     addData() {
       this.addVisible = true
       this.editId = undefined
-      this.searchForm = {}
+      this.editForm = JSON.parse(
+        JSON.stringify(this.cloneEditForm),
+      )
       this.$nextTick(() => {
         this.$refs.form.clearValidate()
       })
@@ -454,6 +582,11 @@ export default {
       })
       try {
         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
       } catch (e) {
         this.$message.danger(e)
@@ -471,6 +604,10 @@ export default {
       const l = this.$loading({
         background: 'rgba(0, 0, 0, 0.3)',
       })
+      this.editForm.databaseName =
+        'saas_' + this.editForm.databaseName
+      this.editForm.domain =
+        this.editForm.domain + '.joshine.cn'
       try {
         if (this.editId) {
           const res = await updateManageData(this.editForm)
@@ -480,7 +617,6 @@ export default {
           }
         } else {
           const res = await addManageData(this.editForm)
-          console.log(res)
           if (res.code === 200) {
             this.$message.success(res.message)
             this.getList()
@@ -494,6 +630,10 @@ export default {
       }
     },
     async deleteData() {
+      if (this.selection.length === 0) {
+        this.$message.error('请至少选择一条记录')
+        return
+      }
       let ids = []
       ids = this.selection.map((item) => item.id)
       ids = ids.join()
@@ -512,7 +652,24 @@ export default {
     handleSelectionChange(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>
@@ -548,6 +705,18 @@ export default {
     .el-dialog__body {
       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;
+    }
   }
 }