创建报送任务vue

client/src/api/task.js

@@ -1,9 +1,7 @@
 import request from '@/utils/request'
 
 
-
-
-export function getTaskList(query) {
+export function gettasklist(query) {
   return request({
     url: '/supervision/task/',
     method: 'get',
@@ -11,14 +9,14 @@ export function getTaskList(query) {
   })
 }
 
-export function getTask(id) {
+export function gettask(id) {
   return request({
     url: `/supervision/task/${id}/`,
     method: 'get'
   })
 }
 
-export function createTask(data) {
+export function createtask(data) {
   return request({
     url: '/supervision/task/',
     method: 'post',
@@ -26,7 +24,7 @@ export function createTask(data) {
   })
 }
 
-export function updateTask(id, data) {
+export function updatetask(id, data) {
   return request({
     url: `/supervision/task/${id}/`,
     method: 'put',
@@ -34,7 +32,7 @@ export function updateTask(id, data) {
   })
 }
 
-export function deleteTask(id, data) {
+export function deletetask(id, data) {
   return request({
     url: `/supervision/task/${id}/`,
     method: 'delete',

client/src/router/index.js

@@ -118,7 +118,7 @@ export const asyncRoutes = [
       path: 'content',
       name: 'Content',
       component: () => import('@/views/supervision/content.vue'),
-      meta: { title: '资料清单', icon: 'documentation', perms: ['content_manage'] }
+      meta: { title: '材料清单', icon: 'documentation', perms: ['content_manage'] }
     },
     {
       path: 'task',

client/src/views/supervision/content.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <div style="margin-top: 10px">
+    <el-card>
       <el-button type="primary" icon="el-icon-plus" @click="handleAddContent"
         >新增</el-button
       >
-    </div>
+    </el-card>
     <el-card
     style="margin-top: 10px"
     >
@@ -31,8 +31,7 @@
       <el-table-column align="center" label="是否可主动报送">
         <template slot-scope="scope">
           <el-tag type="success" v-if="scope.row.can_doself">是</el-tag>
-          <el-tag type="danger" v-else>否</el-tag></template
-        >
+          </template>
       </el-table-column>
 
       <el-table-column align="center" label="操作" width="200px" fixed="right">
@@ -99,31 +98,6 @@
     </el-dialog>
   </div>
 </template>
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-}
-.avatar {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
-</style>
 <script>
 import {
   getContentList,

client/src/views/supervision/task.vue

@@ -1,97 +1,133 @@
 <template>
   <div class="app-container">
+    <el-card>
+      <div>
+      <el-input
+              v-model="listQuery.search"
+              placeholder="任务名"
+              style="width: 300px"
+              class="filter-item"
+              @keyup.enter.native="handleFilter"
+            />
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-search"
+              @click="handleFilter"
+              >搜索</el-button
+            >
+            <el-button
+              class="filter-item"
+              type="primary"
+              icon="el-icon-refresh-left"
+              @click="resetFilter"
+              >刷新重置</el-button
+            >
+    </div>
     <div style="margin-top: 10px">
       <el-button type="primary" icon="el-icon-plus" @click="handleCreate"
-        >创建报送任务</el-button>
+        >创建报送任务</el-button
+      >
       <el-button type="primary" icon="el-icon-plus" @click="handleCreate2"
-        >创建主动报送任务</el-button>
+        >创建主动报送任务</el-button
+      >
     </div>
-    <el-card
-    style="margin-top: 10px"
-    >
-    <el-table
-      v-loading="listLoading"
-      :data="contentList"
-      border
-      fit
-      stripe
-      highlight-current-row
-      max-height="600"
-    >
-      <el-table-column type="index" width="50" />
-      <el-table-column label="名称">
-        <template slot-scope="scope">{{ scope.row.name }}</template>
-      </el-table-column>
-      <el-table-column label="详情">
-        <template slot-scope="scope">{{ scope.row.desc }}</template>
-      </el-table-column>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-table
+        v-loading="listLoading"
+        :data="taskList.results"
+        border
+        fit
+        stripe
+        highlight-current-row
+        max-height="600"
+      >
+        <el-table-column type="index" width="50" />
+        <el-table-column label="任务名">
+          <template slot-scope="scope">{{ scope.row.name }}</template>
+        </el-table-column>
+        <el-table-column label="是否主动报送">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.is_self" type="success">是</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="截止日期">
+          <template slot-scope="scope">{{ scope.row.end_date }}</template>
+        </el-table-column>
 
-      <el-table-column label="材料类型">
-        <template slot-scope="scope">{{ scope.row.type_ }}</template>
-      </el-table-column>
-      <el-table-column align="center" label="是否可主动报送">
-        <template slot-scope="scope">
-          <el-tag type="success" v-if="scope.row.can_doself">是</el-tag>
-          <el-tag type="danger" v-else>否</el-tag></template
+        <el-table-column label="任务备注">
+          <template slot-scope="scope">{{ scope.row.note }}</template>
+        </el-table-column>
+
+        <el-table-column
+          align="center"
+          label="操作"
+          width="220px"
+          fixed="right"
         >
-      </el-table-column>
-
-      <el-table-column align="center" label="操作" width="200px" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            :disabled="!checkPermission(['content_update'])"
-            type="primary"
-            size="small"
-            icon="el-icon-edit"
-            @click="handleEdit(scope)"
-          />
-          <el-button
-            :disabled="!checkPermission(['content_delete'])"
-            type="danger"
-            size="small"
-            icon="el-icon-delete"
-            @click="handleDelete(scope)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-</el-card>
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              :disabled="!checkPermission(['task_view'])"
+              size="small"
+              @click="handleDetail(scope)"
+            >详情</el-button>
+            <el-button
+              :disabled="!checkPermission(['task_update'])"
+              size="small"
+              @click="handleEdit(scope)"
+            >编辑</el-button>
+            <el-button
+              :disabled="!checkPermission(['task_delete'])"
+              type="danger"
+              size="small"
+              @click="handleDelete(scope)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="taskList.count > 0"
+        :total="taskList.count"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.page_size"
+        @pagination="getList"
+      />
+    </el-card>
     <el-dialog
       :visible.sync="dialogVisible"
-      :title="dialogType === 'edit' ? '编辑资料' : '新增资料'"
+      :title="dialogType === 'edit' ? '编辑任务' : '新增任务'"
     >
       <el-form
         ref="Form"
-        :model="Content"
+        :model="task"
         label-width="80px"
         label-position="right"
         :rules="rule1"
       >
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="Content.name" placeholder="名称" />
+        <el-form-item label="任务名" prop="name">
+          <el-input v-model="task.name" placeholder="名称" />
         </el-form-item>
-        <el-form-item label="材料类型" prop="type" >
-          <el-cascader
-            v-model = "Content.type"
-            :options="typeOptions"
-            :props="{ emitPath : false , }"
-            clearable
+        <el-form-item label="截止日期" prop="end_date">
+          <el-date-picker
+            v-model="task.end_date"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
             style="width:100%"
-          ></el-cascader>
+          >
+          </el-date-picker>
         </el-form-item>
 
-        <el-form-item label="详情" prop="desc">
+        <el-form-item label="任务备注" prop="note">
           <el-input
             type="textarea"
             :rows="4"
-            v-model="Content.desc"
-            placeholder="详情"
+            v-model="task.note"
+            placeholder="任务备注"
           />
         </el-form-item>
-
-        <el-form-item label="是否可主动报送" prop="can_doself" label-width="120px">
-          <el-switch v-model="Content.can_doself" ></el-switch>
-        </el-form-item>
       </el-form>
       <div style="text-align: right">
         <el-button type="danger" @click="dialogVisible = false">取消</el-button>
@@ -100,114 +136,77 @@
     </el-dialog>
   </div>
 </template>
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-}
-.avatar {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
-</style>
 <script>
-import {
-  getContentList,
-  createContent,
-  deleteContent,
-  updateContent,
-} from "@/api/content";
-import { genTree } from "@/utils";
+import { gettasklist, createtask, deletetask, updatetask } from "@/api/task";
 import checkPermission from "@/utils/permission";
 import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { getDictList, getDictTypeList } from "@/api/dict";
-const defaultContent = {
+const defaulttask = {
   name: "",
-  desc: "",
-  type: null,
-  can_doself: false,
+  note: "",
+  end_date: null,
 };
 export default {
-  components: { Pagination, Treeselect },
+  components: { Pagination },
   data() {
     return {
-      Content: defaultContent,
-      contentList: [],
-      typeOptions: [],
+      task: defaulttask,
+      taskList: {
+        count: 0,
+      },
+      listQuery: {
+        page: 1,
+        page_size: 20,
+      },
       listLoading: true,
       dialogVisible: false,
       dialogType: "new",
       rule1: {
-        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        name: [{ required: true, message: "请输入", trigger: "blur" }],
+        end_date: [{ required: true, message: "请选择", trigger: "blur" }],
       },
-      filterOrgText: "",
-      treeLoding: false,
     };
   },
   computed: {},
-  watch: {
-    filterOrgText(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
+  watch: {},
   created() {
     this.getList();
-    this.getTypeAll();
   },
   methods: {
     checkPermission,
-
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-
     getList() {
       this.listLoading = true;
-      getContentList().then((response) => {
+      gettasklist(this.listQuery).then((response) => {
         if (response.data) {
-          this.contentList = response.data;
+          this.taskList = response.data;
         }
         this.listLoading = false;
       });
     },
-    getTypeAll() {
-      getDictList({ type__code: "data_type" }).then((res) => {
-        this.typeOptions = genTree(res.data);
-      });
-    },
 
     handleFilter() {
       this.listQuery.page = 1;
       this.getList();
     },
+    resetFilter() {
+      this.listQuery = {
+        page: 1,
+        page_size: 20,
+      }
+      this.getList();
+    },
     handleCreate() {
-      this.Content = Object.assign({}, defaultContent);
+      this.task = Object.assign({}, defaulttask);
       this.dialogType = "new";
       this.dialogVisible = true;
       this.$nextTick(() => {
         this.$refs["Form"].clearValidate();
       });
+    },
+    handleCreate2() {
+
     },
     handleEdit(scope) {
-      this.Content = Object.assign({}, scope.row); // copy obj
+      this.task = Object.assign({}, scope.row); // copy obj
       this.dialogType = "edit";
       this.dialogVisible = true;
       this.$nextTick(() => {
@@ -221,20 +220,23 @@ export default {
         type: "error",
       })
         .then(async () => {
-          await deleteContent(scope.row.id);
+          await deletetask(scope.row.id);
           this.getList();
           this.$message.success("成功");
         })
         .catch((err) => {
           console.error(err);
         });
+    },
+    handleDetail(scope){
+
     },
     async confirm(form) {
       this.$refs[form].validate((valid) => {
         if (valid) {
           const isEdit = this.dialogType === "edit";
           if (isEdit) {
-            updateContent(this.Content.id, this.Content).then((res) => {
+            updatetask(this.task.id, this.task).then((res) => {
               if (res.code >= 200) {
                 this.getList();
                 this.dialogVisible = false;
@@ -242,7 +244,7 @@ export default {
               }
             });
           } else {
-            createContent(this.Content).then((res) => {
+            createtask(this.task).then((res) => {
               if (res.code >= 200) {
                 this.getList();
                 this.dialogVisible = false;