添加项目管理模块

src/api/datax-job-project.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// project
+
+export function list(params) {
+  return request({
+    url: '/api/jobProject',
+    method: 'get',
+    params
+  })
+}
+
+export function updated(data) {
+  return request({
+    url: '/api/jobProject',
+    method: 'put',
+    data
+  })
+}
+
+export function created(data) {
+  return request({
+    url: '/api/jobProject',
+    method: 'post',
+    data
+  })
+}
+
+export function deleted(data) {
+  return request({
+    url: '/api/jobProject',
+    method: 'delete',
+    params: data
+  })
+}
+

src/router/index.js

@@ -136,6 +136,21 @@ export const asyncRoutes = [
     component: () => import('@/views/datax/jobLog/log'),
     meta: { title: '任务日志', icon: 'work' }
   },
+  {
+    path: '/datax/project',
+    component: Layout,
+    redirect: '/datax/jobProject',
+    name: 'datasource',
+    meta: { title: '项目管理', icon: 'project' },
+    children: [
+      {
+        path: 'jobProject',
+        name: 'jobProject',
+        component: () => import('@/views/datax/jobProject/index'),
+        meta: { title: '项目管理', icon: 'project' }
+      }
+    ]
+  },
   {
     path: '/datax/job',
     component: Layout,

src/views/datax/jobProject/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.name"
+        clearable
+        placeholder="项目名称"
+        style="width: 200px;"
+        class="filter-item"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">
+        搜索
+      </el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+        添加
+      </el-button>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="序号" width="95">
+        <template slot-scope="scope">{{ scope.$index+1 }}</template>
+      </el-table-column>
+      <el-table-column label="项目名称" width="200" align="center">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="项目描述" width="150" align="center">
+        <template slot-scope="scope">{{ scope.row.description }}</template>
+      </el-table-column>
+      <el-table-column label="所属用户" width="200" align="center">
+        <template slot-scope="scope">{{ scope.row.userName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" width="150" align="center">
+        <template slot-scope="scope">{{ scope.row.createTime }}</template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+            编辑
+          </el-button>
+          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.pageNo"
+      :limit.sync="listQuery.pageSize"
+      @pagination="fetchData"
+    />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="800px">
+      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">
+        <el-form-item label="项目名称" prop="name">
+          <el-input v-model="temp.name" placeholder="项目名称" style="width: 40%" />
+        </el-form-item>
+        <el-form-item label="项目描述" prop="description">
+          <el-input v-model="temp.description" placeholder="项目描述" style="width: 40%" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          确认
+        </el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogPluginVisible" title="Reading statistics">
+      <el-table :data="pluginData" border fit highlight-current-row style="width: 100%">
+        <el-table-column prop="key" label="Channel" />
+        <el-table-column prop="pv" label="Pv" />
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as jobProjectApi from '@/api/datax-job-project'
+import waves from '@/directive/waves'
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'JobProject',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        pageNo: 1,
+        pageSize: 10,
+        searchVal: ''
+      },
+      pluginTypeOptions: ['reader', 'writer'],
+      dialogPluginVisible: false,
+      pluginData: [],
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      rules: {
+        name: [{ required: true, message: 'this is required', trigger: 'blur' }],
+        description: [{ required: true, message: 'this is required', trigger: 'blur' }]
+      },
+      temp: {
+        id: undefined,
+        name: '',
+        description: ''
+      },
+      visible: true
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      jobProjectApi.list(this.listQuery).then(response => {
+        const { records } = response
+        const { total } = response
+        this.total = total
+        this.list = records
+        this.listLoading = false
+      })
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        name: '',
+        description: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          jobProjectApi.created(this.temp).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          jobProjectApi.updated(tempData).then(() => {
+            this.fetchData()
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      console.log('删除')
+      const idList = []
+      idList.push(row.id)
+      jobProjectApi.deleted({ idList: row.id }).then(response => {
+        this.fetchData()
+        this.$notify({
+          title: 'Success',
+          message: 'Delete Successfully',
+          type: 'success',
+          duration: 2000
+        })
+      })
+    }
+  }
+}
+</script>