Ver Fonte

xianshangwenti

wenbobowen há 4 anos atrás
pai
commit
b0d2ad5369

+ 318 - 0
src/views/projectManage/onlineproblem/component/header.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="Parent1" style="background-color:#F2F3F6;min-height:calc(100vh - 80px);padding: 0 10px 10px 10px">
+    <div class="stylus-head">
+      <div class="stylus-title">
+        <div>
+          <span style="font-size: 22px;letter-spacing: 1px;font-weight: 600;color: #333B4A;padding-left: 15px">线上问题</span>
+          <div class="new-tab-open">
+            <el-switch
+              v-model="newTabOpen"
+              active-text="新标签页跳转"
+            />
+          </div>
+        </div>
+        <div>
+          <el-button type="primary" size="mini" @click="home_created_project">新建项目</el-button>
+        </div>
+      </div>
+      <el-divider style="color: #EEF0F5;" />
+      <div class="Layout" style="padding-top: 5px;">
+        <div>
+          <el-form :model="form_all" class="Layout">
+            <div class="Layout" style="padding-left: 15px">
+              <div class="queryName">项目名称</div>
+              <el-input v-model="form_all.name" size="small" clearable style="width:72% !important;" placeholder="请输入标题或ID" @change="query_project(form_all)" />
+            </div>
+            <div class="Layout">
+              <div class="queryName marginLeft">负责人</div>
+              <el-select
+                v-model="form_all.projectOwner"
+                filterable
+                clearable
+                remote
+                placeholder="请输入姓名或邮箱前缀"
+                :remote-method="remoteMethod"
+                :loading="loading"
+                size="small"
+                @focus="optionsClear"
+                @change="query_project(form_all)"
+              >
+                <el-option v-for="item in options" :key="item.idap" style="min-width:300px" :label="item.name" :value="test2(item, 0)">
+                  <div class="flex_start">
+                    <div class="deptName">{{ item.deptName }}</div>
+                    <div style="min-width:80px">{{ item.name }}</div>
+                    <div class="deptName">{{ item.idap }}</div>
+                  </div>
+                </el-option>
+              </el-select>
+            </div>
+            <div class="Layout">
+              <div class="queryName marginLeft">优先级</div>
+              <el-select v-model="form_all.priority" size="small" clearable filterable placeholder="请选择" @change="query_project(form_all)">
+                <el-option v-for="item in arr_priority" :key="item.value" :label="item.name" :value="item.value" />
+              </el-select>
+            </div>
+          </el-form>
+        </div>
+        <div class="screen" @click="showSelect">{{ goodName }}</div>
+      </div>
+      <div v-show="DetailedScreening" class="stylus-more">
+        <div>
+          <el-form :model="form_all" class="flex_start">
+            <div class="Layout">
+              <div class="queryName">项目类型</div>
+              <el-select v-model="form_all.bizType" size="small" clearable filterable placeholder="请选择">
+                <el-option v-for="item in arr_prjectType" :key="item.value" :label="item.name" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="Layout" label="创建人">
+              <div class="queryName marginLeft">创建人</div>
+              <el-select
+                v-model="form_all.creater"
+                filterable
+                remote
+                clearable
+                placeholder="请输入姓名或邮箱前缀"
+                :remote-method="remoteMethod"
+                :loading="loading"
+                size="small"
+                @focus="optionsClear"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.idap"
+                  :label="item.name"
+                  :value="test2(item, 0)"
+                >
+                  <div class="flex_start">
+                    <div class="deptName">{{ item.deptName }}</div>
+                    <div style="min-width:80px">{{ item.name }}</div>
+                    <div class="deptName">{{ item.idap }}</div>
+                  </div>
+                </el-option>
+              </el-select>
+            </div>
+          </el-form>
+        </div>
+        <div align="right" style="padding-top: 1%;">
+          <el-button type="primary" size="mini" @click="query_project(form_all)">筛 选</el-button>
+          <el-button size="mini" @click="query_Reset">重 置</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  memberQueryMemberInfoByIDAPorName
+} from '@/api/projectIndex'
+import '@/views/projectManage/publicCss/index.css'
+export default {
+  data() {
+    return {
+      newTabOpen: true,
+      form_all: {},
+      options: [],
+      goodName: '更多筛选',
+      loading: false,
+      arr_priority: [
+        { value: 0, name: 'P0' },
+        { value: 1, name: 'P1' },
+        { value: 2, name: 'P2' },
+        { value: 3, name: 'P3' }
+      ],
+      DetailedScreening: false,
+      arr_prjectType: [
+        { value: 0, name: '业务/产品' },
+        { value: 1, name: '技术优化/技术FT' },
+        { value: 2, name: '测试优化/测试FT' }
+      ]
+    }
+  },
+  methods: {
+    test2(item, e) {
+      // 获取团队人员信息
+      if (typeof this.test[item.idap] === 'undefined') {
+        item.role = e
+        this.test[item.idap] = item
+      }
+      return item.idap
+    },
+    home_created_project() {
+      this.form = {}
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['form'].clearValidate()
+      })
+      this.$set(this.form, 'bizId', this.bizId)
+    },
+    remoteMethod(query) {
+      // 人员查询
+      if (query !== '') {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+          memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
+            this.options = res.data
+          })
+        }, 200)
+      } else {
+        this.options = []
+      }
+    },
+    optionsClear() {
+      this.options = []
+    },
+    showSelect() {
+      this.DetailedScreening = !this.DetailedScreening
+      this.goodName === '更多筛选' ? this.goodName = '收起筛选' : this.goodName = '更多筛选'
+    },
+    query_Reset() {
+      // 重置
+      this.$set(this.form_all, 'priority', this.query_object.priority)
+      this.$set(this.form_all, 'name', this.query_object.name)
+      this.$set(this.form_all, 'projectOwner', this.query_object.projectOwner)
+      this.$set(this.form_all, 'bizType', '')
+      this.$set(this.form_all, 'creater', '')
+      this.$message({
+        message: '已重置',
+        type: 'success',
+        duration: 1000,
+        offset: 150
+      })
+      this.query_project(this.form_all)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.stylus-head {
+  position: relative;
+}
+.new-tab-open {
+  // position: absolute;
+  display: inline-block;
+  margin-left: 10px;
+  height: 30px;
+  vertical-align: middle;
+}
+.task {
+  /deep/ .el-dialog__title {
+    line-height: 24px;
+    font-size: 18px;
+    color: #303133;
+    padding-left: 10px;
+}
+
+.blueStripe {
+  width:4px;
+  height:17px;
+  background:#409EFF;
+  border-radius:1px;
+  position: absolute;
+  top: 23px;
+  left: 20px;
+}
+}
+</style>
+
+<style scoped>
+.el-loading-mask {
+  z-index: 8;
+}
+.footer {
+  text-align: right;
+  margin: 1%;
+  background-color: #ffffff;
+  border-radius: 4px;
+}
+
+.requirement-x .el-table .cell {
+  padding: 5px 0;
+  font-size: 14px;
+  font-family: MicrosoftYaHei;
+}
+.requirement-x  .el-table .el-table__body tr:hover td { color: #409EFF; background: #EDF6FF; } /*hover时字体, 背景颜色*/
+
+.requirement_el-dropdown-menu {
+  max-height: 300px !important;
+  max-width: 200px;
+  overflow-y: auto !important;
+}
+
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: #f6f7fa;
+  color: #606266;
+}
+
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.drop_down {
+  font-size: 14px;
+  color: #333333;
+}
+.el-dialog__header {
+    padding: 0px 0px 0px;
+}
+.div_priority {
+  color: #ffffff;
+  width:fit-content;
+  padding: 0 12px;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+ .Parent1 .el-table .cell {
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    line-height: 23px;
+    padding-right: 10px;
+    margin: -6px 0 -2px 0 !important;
+}
+</style>
+
+<style lang="stylus" scoped>
+  .stylus-head >>> .el-form-item__label
+    color #333333
+    font-weight 400
+  .stylus-content >>> .el-table .el-table__body tr:hover td
+    // color #409EFF !important
+    background #EDF6FF
+  .stylus-head >>> .el-divider--horizontal
+    margin 10px 0
+  .stylus-head >>> .el-form-item
+    margin-bottom 0
+  .stylus-head
+    width 100%
+    padding 15px
+    margin-bottom: 10px
+    background-color white
+    border-radius 4px
+    .stylus-title
+      display flex
+      justify-content space-between
+      align-items center
+    .stylus-more
+      background rgba(252,252,252,1)
+      border-radius 4px
+      padding 15px
+      min-height 100px
+      margin-top 22px
+      border 1px solid rgba(238,238,238,1)
+      width 100%
+  .stylus-content
+    width 100%
+    padding 0.3% 1% 1% 1%
+    margin:0 auto
+    background-color white
+    border-radius 4px
+    min-height: calc(100vh - 142px);
+    .stylus-hover:hover
+      color #409EFF !important
+      cursor pointer
+</style>
+

+ 4 - 309
src/views/projectManage/onlineproblem/index.vue

@@ -1,316 +1,11 @@
 <template>
-  <div class="Parent1" style="background-color:#F2F3F6;min-height:calc(100vh - 80px);padding: 0 10px 10px 10px">
-    <div class="stylus-head">
-      <div class="stylus-title">
-        <span style="font-size: 22px;letter-spacing: 1px;font-weight: 600;color: #333B4A;padding-left: 15px">线上问题</span>
-        <div class="new-tab-open">
-          <el-switch
-            v-model="newTabOpen"
-            active-text="新标签页跳转"
-          />
-        </div>
-        <div>
-          <el-button type="primary" size="mini" @click="home_created_project">新建项目</el-button>
-        </div>
-      </div>
-      <el-divider style="color: #EEF0F5;" />
-      <div class="Layout" style="padding-top: 5px;">
-        <div>
-          <el-form :model="form_all" class="Layout">
-            <div class="Layout" style="padding-left: 15px">
-              <div class="queryName">项目名称</div>
-              <el-input v-model="form_all.name" size="small" clearable style="width:72% !important;" placeholder="请输入标题或ID" @change="query_project(form_all)" />
-            </div>
-            <div class="Layout">
-              <div class="queryName marginLeft">负责人</div>
-              <el-select
-                v-model="form_all.projectOwner"
-                filterable
-                clearable
-                remote
-                placeholder="请输入姓名或邮箱前缀"
-                :remote-method="remoteMethod"
-                :loading="loading"
-                size="small"
-                @focus="optionsClear"
-                @change="query_project(form_all)"
-              >
-                <el-option v-for="item in options" :key="item.idap" style="min-width:300px" :label="item.name" :value="test2(item, 0)">
-                  <div class="flex_start">
-                    <div class="deptName">{{ item.deptName }}</div>
-                    <div style="min-width:80px">{{ item.name }}</div>
-                    <div class="deptName">{{ item.idap }}</div>
-                  </div>
-                </el-option>
-              </el-select>
-            </div>
-            <div class="Layout">
-              <div class="queryName marginLeft">优先级</div>
-              <el-select v-model="form_all.priority" size="small" clearable filterable placeholder="请选择" @change="query_project(form_all)">
-                <el-option v-for="item in arr_priority" :key="item.value" :label="item.name" :value="item.value" />
-              </el-select>
-            </div>
-          </el-form>
-        </div>
-        <div class="screen" @click="showSelect">{{ goodName }}</div>
-      </div>
-      <div v-show="DetailedScreening" class="stylus-more">
-        <div>
-          <el-form :model="form_all" class="flex_start">
-            <div class="Layout">
-              <div class="queryName">项目类型</div>
-              <el-select v-model="form_all.bizType" size="small" clearable filterable placeholder="请选择">
-                <el-option v-for="item in arr_prjectType" :key="item.value" :label="item.name" :value="item.value" />
-              </el-select>
-            </div>
-            <div class="Layout" label="创建人">
-              <div class="queryName marginLeft">创建人</div>
-              <el-select
-                v-model="form_all.creater"
-                filterable
-                remote
-                clearable
-                placeholder="请输入姓名或邮箱前缀"
-                :remote-method="remoteMethod"
-                :loading="loading"
-                size="small"
-                @focus="optionsClear"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.idap"
-                  :label="item.name"
-                  :value="test2(item, 0)"
-                >
-                  <div class="flex_start">
-                    <div class="deptName">{{ item.deptName }}</div>
-                    <div style="min-width:80px">{{ item.name }}</div>
-                    <div class="deptName">{{ item.idap }}</div>
-                  </div>
-                </el-option>
-              </el-select>
-            </div>
-          </el-form>
-        </div>
-        <div align="right" style="padding-top: 1%;">
-          <el-button type="primary" size="mini" @click="query_project(form_all)">筛 选</el-button>
-          <el-button size="mini" @click="query_Reset">重 置</el-button>
-        </div>
-      </div>
-    </div>
-  </div>
+  <Header />
 </template>
 <script>
-import {
-  // projectList,
-  memberQueryMemberInfoByIDAPorName
-  // settingGetBizList,
-  // projectCreate
-} from '@/api/projectIndex'
-import '@/views/projectManage/publicCss/index.css'
+import Header from './component/header'
 export default {
-  data() {
-    return {
-      newTabOpen: true,
-      form_all: {},
-      options: [],
-      goodName: '更多筛选',
-      loading: false,
-      arr_priority: [
-        { value: 0, name: 'P0' },
-        { value: 1, name: 'P1' },
-        { value: 2, name: 'P2' },
-        { value: 3, name: 'P3' }
-      ],
-      DetailedScreening: false,
-      arr_prjectType: [
-        { value: 0, name: '业务/产品' },
-        { value: 1, name: '技术优化/技术FT' },
-        { value: 2, name: '测试优化/测试FT' }
-      ]
-    }
-  },
-  methods: {
-    test2(item, e) {
-      // 获取团队人员信息
-      if (typeof this.test[item.idap] === 'undefined') {
-        item.role = e
-        this.test[item.idap] = item
-      }
-      return item.idap
-    },
-    home_created_project() {
-      this.form = {}
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['form'].clearValidate()
-      })
-      this.$set(this.form, 'bizId', this.bizId)
-    },
-    remoteMethod(query) {
-      // 人员查询
-      if (query !== '') {
-        this.loading = true
-        setTimeout(() => {
-          this.loading = false
-          memberQueryMemberInfoByIDAPorName({ memberIDAP: query }).then(res => {
-            this.options = res.data
-          })
-        }, 200)
-      } else {
-        this.options = []
-      }
-    },
-    optionsClear() {
-      this.options = []
-    },
-    showSelect() {
-      this.DetailedScreening = !this.DetailedScreening
-      this.goodName === '更多筛选' ? this.goodName = '收起筛选' : this.goodName = '更多筛选'
-    },
-    query_Reset() {
-      // 重置
-      this.$set(this.form_all, 'priority', this.query_object.priority)
-      this.$set(this.form_all, 'name', this.query_object.name)
-      this.$set(this.form_all, 'projectOwner', this.query_object.projectOwner)
-      this.$set(this.form_all, 'bizType', '')
-      this.$set(this.form_all, 'creater', '')
-      this.$message({
-        message: '已重置',
-        type: 'success',
-        duration: 1000,
-        offset: 150
-      })
-      this.query_project(this.form_all)
-    }
+  components: {
+    Header
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.stylus-head {
-  position: relative;
-}
-.new-tab-open {
-  position: absolute;
-  left: 120px;
-}
-.task {
-  /deep/ .el-dialog__title {
-    line-height: 24px;
-    font-size: 18px;
-    color: #303133;
-    padding-left: 10px;
-}
-
-.blueStripe {
-  width:4px;
-  height:17px;
-  background:#409EFF;
-  border-radius:1px;
-  position: absolute;
-  top: 23px;
-  left: 20px;
-}
-}
-</style>
-
-<style scoped>
-.el-loading-mask {
-  z-index: 8;
-}
-.footer {
-  text-align: right;
-  margin: 1%;
-  background-color: #ffffff;
-  border-radius: 4px;
-}
-
-.requirement-x .el-table .cell {
-  padding: 5px 0;
-  font-size: 14px;
-  font-family: MicrosoftYaHei;
-}
-.requirement-x  .el-table .el-table__body tr:hover td { color: #409EFF; background: #EDF6FF; } /*hover时字体, 背景颜色*/
-
-.requirement_el-dropdown-menu {
-  max-height: 300px !important;
-  max-width: 200px;
-  overflow-y: auto !important;
-}
-
-.el-dropdown-menu__item:not(.is-disabled):hover {
-  background-color: #f6f7fa;
-  color: #606266;
-}
-
-.el-table .warning-row {
-  background: oldlace;
-}
-
-.drop_down {
-  font-size: 14px;
-  color: #333333;
-}
-.el-dialog__header {
-    padding: 0px 0px 0px;
-}
-.div_priority {
-  color: #ffffff;
-  width:fit-content;
-  padding: 0 12px;
-  border-radius: 4px;
-  margin-left: 4px;
-}
- .Parent1 .el-table .cell {
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    line-height: 23px;
-    padding-right: 10px;
-    margin: -6px 0 -2px 0 !important;
-}
-</style>
-
-<style lang="stylus" scoped>
-  .stylus-head >>> .el-form-item__label
-    color #333333
-    font-weight 400
-  .stylus-content >>> .el-table .el-table__body tr:hover td
-    // color #409EFF !important
-    background #EDF6FF
-  .stylus-head >>> .el-divider--horizontal
-    margin 10px 0
-  .stylus-head >>> .el-form-item
-    margin-bottom 0
-  .stylus-head
-    width 100%
-    padding 15px
-    margin-bottom: 10px
-    background-color white
-    border-radius 4px
-    .stylus-title
-      display flex
-      justify-content space-between
-      align-items center
-    .stylus-more
-      background rgba(252,252,252,1)
-      border-radius 4px
-      padding 15px
-      min-height 100px
-      margin-top 22px
-      border 1px solid rgba(238,238,238,1)
-      width 100%
-  .stylus-content
-    width 100%
-    padding 0.3% 1% 1% 1%
-    margin:0 auto
-    background-color white
-    border-radius 4px
-    min-height: calc(100vh - 142px);
-    .stylus-hover:hover
-      color #409EFF !important
-      cursor pointer
-</style>
-