默认查询服役

src/views/proconfig/index.vue

@@ -5,6 +5,9 @@
       <el-select v-model="listQuery.type" placeholder="项目类型" clearable style="width: 200px" class="filter-item" >
         <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
       </el-select>
+      <el-select v-model="listQuery.is_active" placeholder="是否服役" clearable style="width: 200px" class="filter-item" >
+        <el-option v-for="item in avtiveOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
+      </el-select>
       <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
         <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key"/>
       </el-select>
@@ -15,41 +18,22 @@
     <el-table
       :data="proconfigs"
       fit
+      size="medium"
       highlight-current-row
-      style="width: 100%;"
-      @sort-change="sortChange">
-      <!-- <el-table-column fixed type="expand">
-        <template slot-scope="scope">
-          <el-form label-position="left" inline class="demo-table-expand">
-            <el-form-item label="服务名称">
-              <span>{{ scope.row.project_name }}</span>
-            </el-form-item>
-            <el-form-item label="服务描述">
-              <span>{{ scope.row.des }}</span>
-            </el-form-item>
-            <el-form-item label="类型">
-              <span>{{ scope.row.type }}</span>
-            </el-form-item>
-          </el-form>
-        </template>
-      </el-table-column> -->
+      style="width: 100%;">
+
       <el-table-column :label="$t('table.id')" prop="id" align="center" width="55">
         <template slot-scope="scope">
           <span>{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="服务名称" width="180px" sortable="custom" align="center">
+
+      <el-table-column label="服务名称" width="180px" align="center">
         <template slot-scope="scope">
           <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.project_name }}</span>
         </template>
       </el-table-column>
 
-      <!-- <el-table-column label="服务描述" width="180px" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.des }}</span>
-        </template>
-      </el-table-column> -->
-
       <el-table-column label="线上域名" width="180px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.host_name }}</span>
@@ -73,24 +57,6 @@
         </template>
       </el-table-column>
 
-      <!-- <el-table-column label="API" width="210px" align="center">
-        <template slot-scope="scope">
-          <span class="link-type" @click="openUrl(scope.row.api)">{{ scope.row.api }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="数据库DDL" width="210px" align="center">
-        <template slot-scope="scope">
-          <span class="link-type" @click="openUrl(scope.row.ddl)">{{ scope.row.ddl }}</span>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="Wiki" width="210px" align="center">
-        <template slot-scope="scope">
-          <span class="link-type" @click="openUrl(scope.row.wiki)">{{ scope.row.wiki }}</span>
-        </template>
-      </el-table-column> -->
-
       <el-table-column
         label="API地址"
         align="center">
@@ -116,36 +82,38 @@
         align="center">
         <template slot-scope="scope">
           <el-tooltip :content="scope.row.wiki" class="item" effect="dark" placement="top">
-            <el-button v-show="scope.row.wiki" type="success" icon="el-icon-time" circle @click="openUrl(scope.row.wiki)"/>
+            <el-button v-show="scope.row.wiki" type="warning" icon="el-icon-time" circle @click="openUrl(scope.row.wiki)"/>
           </el-tooltip>
         </template>
       </el-table-column>
 
-      <el-table-column label="Git地址" width="210px" align="center">
+      <el-table-column
+        label="Git地址"
+        align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.git_path }}</span>
+          <el-tooltip :content="scope.row.git_path" class="item" effect="dark" placement="top">
+            <el-button v-show="scope.row.git_path" type="info" icon="el-icon-time" circle />
+          </el-tooltip>
         </template>
       </el-table-column>
 
-      <el-table-column :label="$t('table.actions')" align="center" width="150" class-name="small-padding fixed-width">
+      <el-table-column :label="$t('table.actions')" align="center" width="70" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
-          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
-          </el-button>
+          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
+          </el-button> -->
         </template>
       </el-table-column>
     </el-table>
 
-    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
-
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="105px" style="width: 90%; margin-left:40px;">
+      <el-form ref="dataForm" :model="temp" label-position="left" label-width="105px" style="width: 90%; margin-left:40px;">
         <el-form-item label="类型" prop="type">
           <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
             <el-option v-for="item in typeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="Git地址" prop="git_path" >
+        <el-form-item label="Git地址" prop="git_path" style="width: 100%;">
           <el-input v-model="temp.git_path"/>
         </el-form-item>
         <el-form-item label="是否服役" >
@@ -158,47 +126,41 @@
             <el-option v-for="item in deployOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
           </el-select>
         </el-form-item>
-        <el-form-item label="项目描述" >
+        <el-form-item label="项目描述" style="width: 100%;">
           <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.des" type="textarea" placeholder="Please input"/>
         </el-form-item>
-        <el-form-item label="线上域名" >
+        <el-form-item label="线上域名" style="width: 100%;">
           <el-input v-model="temp.host_name"/>
         </el-form-item>
-        <el-form-item label="负责人" >
+        <el-form-item label="负责人" style="width: 100%;">
           <el-input v-model="temp.auth"/>
         </el-form-item>
-        <el-form-item label="配置文件路径" >
+        <el-form-item label="配置文件路径" style="width: 100%;">
           <el-input v-model="temp.config_path"/>
         </el-form-item>
-        <el-form-item label="Build文件路径" >
+        <el-form-item label="Build文件路径" style="width: 100%;">
           <el-input v-model="temp.jar_path"/>
         </el-form-item>
-        <el-form-item label="日志路径" >
+        <el-form-item label="日志路径" style="width: 100%;">
           <el-input v-model="temp.log_path"/>
         </el-form-item>
-        <el-form-item label="部署命令" >
+        <el-form-item label="部署命令" style="width: 100%;">
           <el-input v-model="temp.build_command"/>
         </el-form-item>
-        <el-form-item label="API" >
+        <el-form-item label="API" style="width: 100%;">
           <el-input v-model="temp.api"/>
         </el-form-item>
-        <el-form-item label="数据库DDL" >
+        <el-form-item label="数据库DDL" style="width: 100%;">
           <el-input v-model="temp.ddl"/>
         </el-form-item>
-        <el-form-item label="Wiki" >
+        <el-form-item label="Wiki" style="width: 100%;">
           <el-input v-model="temp.wiki"/>
         </el-form-item>
-        <!-- <el-form-item label="启动命令" prop="start_command" style="width:100%">
-          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.start_command" type="textarea"/>
-        </el-form-item>
-        <el-form-item label="关闭命令" prop="stop_command" style="width:100%">
-          <el-input v-model="temp.stop_command"/>
-        </el-form-item> -->
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
         <el-button type="primary" @click="createData()">{{ $t('table.confirm') }}</el-button>
-        <!-- <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button> -->
       </div>
     </el-dialog>
 
@@ -218,7 +180,6 @@
 <script>
 import { getProjects, saveProject, deleteProject } from '@/api/proconfig'
 import waves from '@/directive/waves' // Waves directive
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 const typeOptions = [
   { key: 'java', display_name: 'Java' },
@@ -227,12 +188,6 @@ const typeOptions = [
   { key: 'python', display_name: 'Python' }
 ]
 
-// arr to obj ,such as { CN : "China", US : "USA" }
-const calendarTypeKeyValue = typeOptions.reduce((acc, cur) => {
-  acc[cur.key] = cur.display_name
-  return acc
-}, {})
-
 const avtiveOptions = [
   { key: true, display_name: '服役中' },
   { key: false, display_name: '退役了' }
@@ -254,8 +209,6 @@ const deployKeyValue = deployOptions.reduce((acc, cur) => {
 }, {})
 
 export default {
-  name: 'ComplexTable',
-  components: { Pagination },
   directives: { waves },
   filters: {
     statusFilter(status) {
@@ -265,9 +218,6 @@ export default {
       }
       return statusMap[status]
     },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
-    },
     activeFileter(status) {
       return activeKeyValue[status]
     },
@@ -279,8 +229,7 @@ export default {
     return {
       total: 0,
       listQuery: {
-        project_name: undefined,
-        type: undefined,
+        is_active: true,
         sort: '+project_name'
       },
       typeOptions,
@@ -294,11 +243,6 @@ export default {
         update: 'Edit',
         create: 'Create'
       },
-      rules: {
-        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
-        // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
-        // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
-      },
       proconfigs: [],
       avtiveOptions,
       deployOptions