试验项目管理界面提交

whyczyk

2021-05-17 f2786ec65b0c85996c3523fbafc1fd520356182f

试验项目管理界面提交

 package-lock.json

Diff too large

 src/components/PageMenu.vue

@@ -85,7 +85,7 @@
                    })
                })
            })
            console.log(this.menus)
            // console.log(this.menus)
        },
    }
</script>

 src/pages/test/dialog/addProject.vue

New file
@@ -0,0 +1,276 @@
<template>
  <div class="params-container">
    <el-form ref="ruleForm" size="mini" label-position="top" :model="params" :rules="rules" class="params-dialog">
      <el-row :gutter="layout.gutter">
        <el-col :span="layout.span">
          <el-form-item label="试验项目名称" class="inline" prop="name">
            <el-input placeholder="请输入试验项目名称" v-model="params.name">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="layout.gutter">
        <el-col :span="layout.span">
          <el-form-item label="项目描述" class="inline" prop="description">
            <el-input placeholder="请输入项目描述" v-model="params.description">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="layout.gutter">
        <el-col :span="layout.span">
          <el-form-item label="项目开始时间" class="inline" prop="startTime">
            <el-date-picker v-model="params.startTime" size="small" class="time_box" type="date" placeholder="请选择项目开始时间"
              value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="layout.gutter">
        <el-col :span="layout.span">
          <el-form-item label="计划完成时间" class="inline" prop="endTime">
            <el-date-picker v-model="params.endTime" size="small" class="time_box" type="date" placeholder="请选择计划完成时间"
              value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="layout.gutter">
        <el-col :span="layout.span">
          <el-form-item label="项目负责人" class="inline" prop="manager">
            <el-select v-model="params.manager" multiple filterable clearable placeholder="请选择项目负责人">
              <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="layout.gutter">
        <el-col :span="layout.span">
          <el-form-item label="添加成员" class="inline" prop="parter">
            <el-select v-model="params.parter" multiple filterable clearable placeholder="请选择项目成员">
              <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-footer">
        <three-btn @click="addProject" v-if="JSON.stringify(userInfo) != '{}'">修改</three-btn>
        <three-btn @click="addProject" v-else>添加</three-btn>
      </div>
    </el-form>
  </div>
</template>

<script>
  import ThreeBtn from '@/components/ThreeBtn.vue'
  import {
    addProject,
    updateProject,
    searchUserAll
  } from '../js/api';
  export default {
    props: ["userInfo"],
    components: {
      ThreeBtn
    },
    data() {
      return {
        layout: {
          span: 24,
          gutter: 16
        },
        userList: [],
        params: {
          name: '',
          description: '',
          startTime: '',
          endTime: '',
          manager: [],
          parter: [],
        },
        rules: {
          name: [{
            required: true,
            message: '请输入试验项目名称',
            trigger: 'blur'
          }],
          description: [{
            required: true,
            message: '请输入项目描述',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择项目开始时间',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请选择计划完成时间',
            trigger: 'blur'
          }],
          manager: [{
            required: true,
            message: '请选择项目负责人',
            trigger: 'blur'
          }],
          parter: [{
            required: true,
            message: '请选择项目成员',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      searchUser() {
        searchUserAll().then((res) => {
          res.data.map(item => {
            this.userList.push({
              label: item.realName,
              value: item.id,
            })
          })
          let managerArr = this.params.manager.split(',').filter(value => {
            return value != '';
          })
          let parterArr = this.params.parter.split(',').filter(value => {
            return value != '';
          })
          this.params.manager = [];
          this.params.parter = [];
          this.userList.map((item, i) => {
            managerArr.map(jtem => {
              if (jtem == item.value) {
                this.params.manager.push(this.userList[i].value);
              }
            })
            parterArr.map(jtem => {
              if (jtem == item.value) {
                this.params.parter.push(this.userList[i].value);
              }
            })
          })

        }).catch((err) => {
          console.log(err)
        });
      },
      addProject() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (JSON.stringify(this.userInfo) != '{}') {
              //编辑用户信息保存
              let postData = JSON.parse(JSON.stringify(this.params))
              let managerStr = '';
              postData.manager.map(item => {
                managerStr += item + ','
              })
              postData.manager = managerStr;
              let parterStr = '';
              postData.parter.map(item => {
                parterStr += item + ','
              })
              postData.parter = parterStr;
              updateProject(postData).then((res) => {
                if (res.data.code == 1) {
                  this.$message.success("修改成功！")
                  this.$emit("success", false)
                } else {
                  this.$message.error(res.data.msg)
                }
              }).catch((err) => {
                console.log(err)
              });
            } else {
              let postData = JSON.parse(JSON.stringify(this.params))
              let managerStr = '';
              postData.manager.map(item => {
                managerStr += item + ','
              })
              postData.manager = managerStr;
              let parterStr = '';
              postData.parter.map(item => {
                parterStr += item + ','
              })
              postData.parter = parterStr;

              //添加用户信息保存
              addProject(postData).then((res) => {
                if (res.data.code == 1) {
                  this.$message.success("添加成功！")
                  this.$emit("success", false)
                } else {
                  this.$message.error(res.data.msg)
                }
              }).catch((err) => {
                console.log(err)
              });
            }
          } else {
            return false;
          }
        });
      }
    },
    mounted() {
      if (JSON.stringify(this.userInfo) != '{}') {
        this.params = JSON.parse(JSON.stringify(this.userInfo));
      }
      this.searchUser()
    }
  }
</script>

<style scoped>
  .params-container {
    width: 100%;
    background-color: #ececec;
  }

  .table-layout {
    margin-top: 16px;
  }

  .bg-white .table-cell {
    color: #000000;
  }

  .el-form-item.inline {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin: 15px 4px 8px;
  }

  .el-form-item.inline /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input {
    flex: 1;
  }

  .el-form-item.inline /deep/ .el-input:first-of-type {
    margin-left: 0;
  }

  .el-form-item.inline /deep/ .el-form-item__label {
    width: 110px;
    white-space: nowrap;
    text-align: right;
    padding-right: 8px;
  }

  .params-container /deep/ .el-radio__label {
    color: #333333;
  }

  .params-container /deep/ .el-tag.el-tag--info {
    background-color: #042271;
    border-color: #042271;
    color: #fff;
  }
</style>

 src/pages/test/js/api.js

@@ -1,13 +1,66 @@
import axios from "@/assets/js/axios";

/**
 * 操作日志-查询分页
 * 查询项目分页-根据筛选条件
 */
export const operationLogPage = (page, data) => {
export const projectSearch = (params, data) => {
  return axios({
    method: "POST",
    url: "/operationLog/page",
    params: page,
    url: "/project/search",
    params: params,
    data: data
  });
}

/**
 * 删除项目
 */
export const delProject = (params) => {
  return axios({
    method: "DELETE",
    url: "/project",
    params: params
  });
}

/**
 * 添加项目
 */
export const addProject = (data) => {
  return axios({
    method: "POST",
    url: "/project",
    data: data
  });
}

/**
 * 更新项目
 */
export const updateProject = (data) => {
  return axios({
    method: "PUT",
    url: "/project",
    data: data
  });
}

/**
 * 查询所有用户
 */
export const searchUserAll = () => {
  return axios({
    method: "GET",
    url: "/user/all",
  });
}

/**
 * 获取统计数据
 */
export const getCount = () => {
  return axios({
    method: "GET",
    url: "/project/getCount",
  });
}

 src/pages/test/projectMag.vue

@@ -5,23 +5,23 @@
        <div class="dataListCon">
          <div class="listItem">
            <div class="name">项目总数</div>
            <div class="data">80</div>
            <div class="data">{{total}}</div>
          </div>
          <div class="listItem">
            <div class="name">进行中</div>
            <div class="data">20</div>
            <div class="data">{{ongoing}}</div>
          </div>
          <div class="listItem">
            <div class="name">已延期</div>
            <div class="data">20</div>
            <div class="data">{{postponed}}</div>
          </div>
          <div class="listItem">
            <div class="name">已完成</div>
            <div class="data">20</div>
            <div class="data">{{finished}}</div>
          </div>
          <div class="listItem">
            <div class="name">已取消</div>
            <div class="data">20</div>
            <div class="data">{{canceled}}</div>
          </div>
        </div>
      </page-panel>
@@ -30,15 +30,15 @@
          <div class="table-layout">
            <div class="table-row">
              <!-- 查询条件 -->
              <div class="table-cell text-right">输入查询</div>
              <div class="table-cell text-right">项目名称</div>
              <div class="table-cell">
                <el-input type="text" v-model.trim="content" size="small" placeholder="内容信息"></el-input>
                <el-input type="text" v-model.trim="name" size="small" placeholder="项目名称"></el-input>
              </div>
              <div class="table-cell text-right">操作类型</div>
              <div class="table-cell">
                <el-select size="small" v-model="type">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option v-for="(item, index) in types" :key="'job_' + index" :label="item.value"
                  <el-option v-for="(item, index) in types" :key="'job_' + index" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
@@ -51,13 +51,19 @@
          </div>
        </div>
        <template slot="btnGrp">
          <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-plus">添加</el-button>
          <el-button type="primary" @click="add" size="mini" icon="el-icon-plus">添加</el-button>
        </template>
        <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="table.datas"
          v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <!-- <el-table-column type="index" width="50" label="序号"></el-table-column> -->
          <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :resizable="false" align="center"
            v-for="(item,index) in table.headers" :key="index">
          </el-table-column>
          <el-table-column label="参与人员" align="center">
            <template slot-scope="scope">
              <el-tag size="mini" effect="dark" v-for="(item,i) in scope.row.parterInfo" :key="i" style="margin:0 5px;">
                {{item}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
@@ -73,43 +79,58 @@
          @current-change="currentChange" @size-change="sizeChange"></el-pagination>
      </div>
    </flex-layout>

    <!-- 添加项目 -->
    <el-dialog :title="dialogTitle" width="400px" top="0" :visible.sync="addDialog" :close-on-click-modal="false"
      class="dialog-center" :modal-append-to-body="false">
      <add-project v-if="addDialog" :userInfo="userInfo" @success="addSuccess"></add-project>
    </el-dialog>
  </div>
</template>

<script>
  import pagePanel from '@/components/pagePanel';
  import {
    operationLogPage
    projectSearch,
    delProject,
    getCount
  } from './js/api';
  import AddProject from './dialog/addProject.vue';

  export default {
    data() {
      return {
        content: null,
        userInfo: {},
        dialogTitle: '',
        addDialog: false,
        name: null,
        types: [{
          value: '新增'
          label: '已取消',
          value: 0
        }, {
          value: '删除'
          label: '进行中',
          value: 1
        }, {
          value: '修改'
          label: '完成',
          value: 2
        }, {
          label: '延期',
          value: 3
        }, ],
        type: null,
        table: {
          headers: [{
            prop: "createTime",
            prop: "name",
            label: "项目名称",
            width: 180
          }, {
            prop: "type",
            prop: "statusStr",
            label: "项目状态",
            width: 140
            width: 180
          }, {
            prop: "userName",
            prop: "createTime",
            label: "创建时间",
            width: 140
          }, {
            prop: "terminalIp",
            label: "参与人员",
            width: 180
          }],
          datas: [],
          loading: false
@@ -118,13 +139,32 @@
          pageCurr: 1,
          pageSize: 10,
          pageAll: 0
        }
        },
        canceled: 0,
        finished: 0,
        ongoing: 0,
        postponed: 0,
        total: 0,
      };
    },
    components: {
      pagePanel
      pagePanel,
      AddProject,
    },
    methods: {
      getCount() {
        getCount().then((res) => {
          if (res.data.code == 1) {
            this.total = res.data.data.total;
            this.postponed = res.data.data.postponed;
            this.ongoing = res.data.data.ongoing;
            this.finished = res.data.data.finished;
            this.canceled = res.data.data.canceled;
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      // 查询用户列表
      getList() {
        let params = {
@@ -132,14 +172,23 @@
          pageSize: this.page.pageSize
        };
        let data = {
          content: this.content,
          type: this.type,
          name: this.name,
          status: this.type,
        };

        operationLogPage(params, data).then((res) => {
          console.log(res);
        projectSearch(params, data).then((res) => {
          res = res.data.data;
          this.page.pageAll = res.total;
          res.list.map(item => {
            if (item.status == 0) {
              item.statusStr = '已取消'
            } else if (item.status == 1) {
              item.statusStr = '进行中'
            } else if (item.status == 2) {
              item.statusStr = '完成'
            } else if (item.status == 3) {
              item.statusStr = '延期'
            }
          })
          this.table.datas = res.list;
        }).catch((err) => {
          console.log(err)
@@ -149,8 +198,42 @@
      resetParams() {

      },
      edit() {

      //打开添加计划
      add() {
        this.dialogTitle = '添加计划';
        this.userInfo = {};
        this.addDialog = true;
      },
      edit(row) {
        this.dialogTitle = '编辑用户';
        this.userInfo = row;
        this.addDialog = true;
      },
      addSuccess() {
        // 关闭弹出面板
        this.addDialog = false
        // 从新查询数据
        this.getList();
      },
      remove(row) {
        this.$confirm("确认删除该项目吗？", '系统提示', {
          type: 'warning',
        }).then(() => {
          let postData = {
            id: row.id
          }
          delProject(postData).then((res) => {
            if (res.data.code == 1) {
              this.$message({
                message: '删除成功！',
                type: 'success'
              });
              this.getList();
            }
          }).catch((err) => {
            console.log(err)
          });
        }).catch(() => {});
      },
      currentChange(value) {
        this.page.pageCurr = value;
@@ -164,6 +247,7 @@
    },
    mounted() {
      this.getList();
      this.getCount();
    },
    beforeDestroy() {


 src/pages/user/dialog/addAuthority.vue

@@ -114,7 +114,7 @@
    },
    mounted() {
      if (JSON.stringify(this.userInfo) != '{}') {
        this.params = this.userInfo
        this.params = JSON.parse(JSON.stringify(this.userInfo))
      }
    }
  }

 src/pages/user/dialog/addUser.vue

@@ -208,7 +208,7 @@
    },
    mounted() {
      if (JSON.stringify(this.userInfo) != '{}') {
        this.params = this.userInfo
        this.params = JSON.parse(JSON.stringify(this.userInfo))
      }
      this.getJobs();
      this.getDepts();

 src/pages/user/list.vue

@@ -208,7 +208,6 @@
      edit(row) {
        this.dialogTitle = '编辑用户';
        this.userInfo = row;
        console.log(this.userInfo)
        this.addDialog = true;
      },
      remove(row) {