任务管理

src/views/auditPages/components/taskManagement/selectUnit.vue

@@ -0,0 +1,28 @@
+<template>
+  <!-- 新增任务添加核查单位 -->
+  <!-- <el-form
+          :model="taskForm"
+          :rules="taskRules"
+          ref="taskForm"
+          label-width="110px"
+          label-position="right"
+          class="task-form"
+        >
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitTask">确 定</el-button>
+          <el-button @click="openTask = false">取 消</el-button>
+        </div>
+      </el-dialog> -->
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style></style>

src/views/auditPages/taskManagement.vue

@@ -12,6 +12,7 @@
         size="small"
         :inline="true"
         label-width="110px"
+        class="search-form"
       >
         <el-form-item label="任务名称：" prop="taskName">
           <el-input
@@ -129,6 +130,80 @@
         :limit.sync="formInline.size"
         @pagination="getList"
       />
+
+      <!-- 任务创建弹窗 -->
+      <el-dialog
+        title="新增任务"
+        :visible.sync="openTask"
+        width="800px"
+        append-to-body
+      >
+        <el-form
+          :model="taskForm"
+          :rules="taskRules"
+          ref="taskForm"
+          label-width="110px"
+          label-position="right"
+          class="task-form"
+        >
+          <el-form-item label="活动名称" prop="taskName">
+            <el-input
+              v-model="taskForm.taskName"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="核查资产类型" prop="type">
+            <el-checkbox-group v-model="taskForm.type" @change="assetChange">
+              <el-checkbox label="0">web资产</el-checkbox>
+              <el-checkbox label="1">小程序资产</el-checkbox>
+              <el-checkbox label="2">公众号资产</el-checkbox>
+              <el-checkbox label="3">电子邮件资产</el-checkbox>
+              <el-checkbox label="4">移动应用程序资产</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="核查单位" prop="dwmc">
+            <div class="row-form">
+              <el-select
+                v-model="taskForm.dwmc"
+                placeholder="请选择"
+                multiple
+                collapse-tags
+              >
+                <el-option
+                  v-for="item in taskFormDwmc"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+
+              <el-button
+                style="margin-left: 10px"
+                type="primary"
+                icon="el-icon-menu"
+                size="mini"
+                @click="handleAddUnit()"
+              ></el-button>
+            </div>
+          </el-form-item>
+          <el-form-item label="任务期限" prop="taskDeadline">
+            <el-date-picker
+              type="datetime"
+              placeholder="请选择"
+              v-model="taskForm.taskDeadline"
+              style="width: 100%"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              default-time="23:59:59"
+              :picker-options="pickerOptions"
+            ></el-date-picker>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitTask">确 定</el-button>
+          <el-button @click="openTask = false">取 消</el-button>
+        </div>
+      </el-dialog>
     </template>
   </main-app>
 </template>
@@ -144,6 +219,21 @@ export default {
   dicts: ["tc_rwgl_stste"],
   data() {
     return {
+      taskForm: {
+        taskName: "",
+        dwmc: [],
+        taskDeadline: "",
+        type: [],
+      },
+      taskFormDwmc: [],
+      taskRules: {
+        taskName: [{ required: true, message: "请填写", trigger: "change" }],
+        dwmc: [{ required: true, message: "请填写", trigger: "change" }],
+        taskDeadline: [
+          { required: true, message: "请填写", trigger: "change" },
+        ],
+        type: [{ required: true, message: "请填写", trigger: "change" }],
+      },
       pickerOptions: {
         disabledDate(time) {
           const date = new Date();
@@ -158,7 +248,7 @@ export default {
           return [`${hour}:${minute}:${second} - 23:59:59`];
         })(),
       },
-
+      openTask: true,
       btnloading: false,
       time: [],
       formInline: {
@@ -178,6 +268,31 @@ export default {
     this.getList();
   },
   methods: {
+    // 新增任务确认
+    submitTask() {
+      this.$refs["taskForm"].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          return false;
+        }
+      });
+    },
+    // 新增资产类型变化
+    assetChange() {
+      this.taskForm.dwmc = [];
+      this.$nextTick(() => {
+        this.$refs.taskForm.clearValidate();
+      });
+    },
+    //选择核查单位
+    handleAddUnit() {
+      if (this.taskForm.type.length > 0) {
+      } else {
+        this.$message("请先选择核查资产类型");
+      }
+    },
+
     // 关闭
     handleClose(row) {
       this.$confirm("此操作将关闭任务, 是否继续?", "提示", {
@@ -252,12 +367,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-form-item__content {
-  width: 280px;
-  .el-select,
-  .el-date-editor {
-    width: 100%;
-    color: #67c23a;
+.row-form {
+  display: flex;
+  align-items: center;
+  .el-select {
+    width: 95%;
   }
 }
 </style>