|
@@ -0,0 +1,564 @@
|
|
|
+<template>
|
|
|
+ <div class="demandmanageuser" ref="localDom">
|
|
|
+ <div class="topCon">
|
|
|
+ <div class="topLeft">
|
|
|
+ <Select
|
|
|
+ isReadOnly
|
|
|
+ @change="creatorCondChange"
|
|
|
+ :selectdata="creatorConds"
|
|
|
+ v-model="creatorCond"
|
|
|
+ :placeholder="'请选择'"
|
|
|
+ hideClear
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="topRight">
|
|
|
+ <Input placeholder="主题、编码" @clear="pressEnter" iconType="search" v-model="matchingCond" @pressEnter="pressEnter"/>
|
|
|
+ <Badge :content="draft.count">
|
|
|
+ <Button type="default" @click="openDraft">草稿箱</Button>
|
|
|
+ </Badge>
|
|
|
+ <Button type="primary" @click="addDemand">新增需求</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mainCon">
|
|
|
+ <div class="tableCon" id="tableCon-user">
|
|
|
+ <TableGrid
|
|
|
+ v-if="tableHeight"
|
|
|
+ width="100%"
|
|
|
+ :maxHeight="tableHeight"
|
|
|
+ :header="header"
|
|
|
+ :data="tableData"
|
|
|
+ key="tableGrid"
|
|
|
+ :rowTools="rowTools"
|
|
|
+ @sortHandle="sortHandle"
|
|
|
+ @screenHandle="screenHandle"
|
|
|
+ @rowToolHandle="rowToolHandle"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="paginationCon">
|
|
|
+ <Pagination
|
|
|
+ :pageCountShow="true"
|
|
|
+ :page.sync="pagination.current"
|
|
|
+ :pageSize="pagination.size"
|
|
|
+ :pageCount="pageCount"
|
|
|
+ :pageSizeSetting="true"
|
|
|
+ @change="paginationChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Detail
|
|
|
+ v-if="showDetail"
|
|
|
+ v-model="showDetail"
|
|
|
+ :handle="handleDetail"
|
|
|
+ @cancel="DetailCancel($event), (showDetail = false)"
|
|
|
+ @confirm="DetailConfirm($event), (showDetail = false)"
|
|
|
+ @save="DetailSave($event), (showDetail = false)"
|
|
|
+ />
|
|
|
+ <Draft v-if="showDraft"
|
|
|
+ @back="DraftBack($event),(showDraft = false)"
|
|
|
+ />
|
|
|
+ <Modal
|
|
|
+ :show="modalStatusTip"
|
|
|
+ title="提示"
|
|
|
+ mode="tip"
|
|
|
+ type="info"
|
|
|
+ @close="modalClose"
|
|
|
+ >
|
|
|
+ <template #content>
|
|
|
+ 数据删除不可恢复,是否继续删除?
|
|
|
+ </template>
|
|
|
+ <template #handle>
|
|
|
+ <Button @click="modalClose" type="default">取消</Button>
|
|
|
+ <Button @click="modalConfirm" type="primary">确认</Button>
|
|
|
+ </template>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex'
|
|
|
+import {
|
|
|
+ Select,
|
|
|
+ Badge,
|
|
|
+ Input,
|
|
|
+ TableGrid,
|
|
|
+ Pagination,
|
|
|
+ Modal
|
|
|
+} from 'meri-design'
|
|
|
+import Detail from './Detail'
|
|
|
+import Draft from './Draft'
|
|
|
+export default {
|
|
|
+ name: 'demandmanageuser',
|
|
|
+ components: {
|
|
|
+ Detail,
|
|
|
+ Draft,
|
|
|
+ Select,
|
|
|
+ Badge,
|
|
|
+ Input,
|
|
|
+ TableGrid,
|
|
|
+ Pagination,
|
|
|
+ Modal
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ detailId: '',
|
|
|
+ modalStatusTip: false,
|
|
|
+ showDraft: false,
|
|
|
+ handleDetail: {
|
|
|
+ user: true,
|
|
|
+ type: '详情'
|
|
|
+ },
|
|
|
+ showDetail: false,
|
|
|
+ tableHeight: 300,
|
|
|
+ pagination: {
|
|
|
+ current: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ pageCount: 99,
|
|
|
+ rowTools: {
|
|
|
+ open: true, // 开启显示操作
|
|
|
+ fixed: 'right', // 与header数据的fixed一样
|
|
|
+ width: 120, // 与header数据的width一样
|
|
|
+ align: '', // 与header数据的align一样
|
|
|
+ text: '', // 头部显示的文字,默认是操作
|
|
|
+ moreOpen: true,
|
|
|
+ event: 'rowToolHandle'
|
|
|
+ },
|
|
|
+ name: 'ddd',
|
|
|
+ creatorCond: 0, // 下拉筛选条件 - 0:所有需求 1:我的需求
|
|
|
+ creatorConds: [{ id: 0, name: '所有需求' }, { id: 1, name: '我的需求' }],
|
|
|
+ matchingCond: '', // 模糊匹配 - 编码、主题
|
|
|
+ productCond: [1, 2, 3], // 产线条件
|
|
|
+ stateCond: [1, 2, 3, 4, 5], // 状态条件
|
|
|
+ orders: [
|
|
|
+ // {
|
|
|
+ // column: 'submitTime',
|
|
|
+ // asc: true
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ draft: {
|
|
|
+ data: [],
|
|
|
+ count: 0
|
|
|
+ },
|
|
|
+ line: { 1: '业务', 2: '研发', 3: '实施' },
|
|
|
+ state: { 1: '待回复', 2: '已接受', 3: '已拒绝', 4: '待完善', 5: '论证中' },
|
|
|
+ header: [
|
|
|
+ {
|
|
|
+ key: 'userName',
|
|
|
+ text: '用户名',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'deptName',
|
|
|
+ text: '部门',
|
|
|
+ width: 180
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'productLine',
|
|
|
+ text: '条线',
|
|
|
+ width: 100,
|
|
|
+ screen: {
|
|
|
+ open: true,
|
|
|
+ status: 'single',
|
|
|
+ data: [
|
|
|
+ { id: 'all', name: '全部' },
|
|
|
+ { id: '1', name: '业务' },
|
|
|
+ { id: '2', name: '研发' },
|
|
|
+ { id: '3', name: '实施' }
|
|
|
+ ],
|
|
|
+ selectId: '1',
|
|
|
+ selectName: '业务',
|
|
|
+ event: 'screenHandle'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'code',
|
|
|
+ text: '编码',
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'subject',
|
|
|
+ text: '主题'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'submitTime',
|
|
|
+ text: '提交时间',
|
|
|
+ width: 180,
|
|
|
+ sort: { open: true, event: 'sortHandle' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'answerTime',
|
|
|
+ text: '回复时间',
|
|
|
+ width: 180,
|
|
|
+ sort: { open: true, event: 'sortHandle' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'billState', // 需求状态 - 0:待提交 1:待回复 2:已接受 3:已拒绝 4:待完善 5:论证中
|
|
|
+ text: '当前状态',
|
|
|
+ width: 120,
|
|
|
+ screen: {
|
|
|
+ open: true,
|
|
|
+ status: 'single',
|
|
|
+ data: [
|
|
|
+ { id: 'all', name: '全部' },
|
|
|
+ { id: '1', name: '待回复' },
|
|
|
+ { id: '2', name: '已接受' },
|
|
|
+ { id: '3', name: '已拒绝' },
|
|
|
+ { id: '4', name: '待完善' },
|
|
|
+ { id: '5', name: '论证中' }
|
|
|
+ ],
|
|
|
+ event: 'screenHandle'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ temp: [
|
|
|
+ {
|
|
|
+ id: '1438483235070820355',
|
|
|
+ valid: 1,
|
|
|
+ creationTime: 1631796103000,
|
|
|
+ creator: '1e7051ee780d4355813795f65809f815',
|
|
|
+ code: '10002',
|
|
|
+ userName: 'csgo',
|
|
|
+ deptName: 'BDTP',
|
|
|
+ productLine: 1,
|
|
|
+ subject: '主题',
|
|
|
+ content: '内容',
|
|
|
+ submitTime: '202109091212',
|
|
|
+ answerTime: '',
|
|
|
+ billState: 1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableData: [
|
|
|
+ // {
|
|
|
+ // id: 'id',
|
|
|
+ // userName: { text: 'answerTime' },
|
|
|
+ // deptName: { text: 'answerTime' },
|
|
|
+ // productLine: { text: '研发' },
|
|
|
+ // code: { text: 'answerTime' },
|
|
|
+ // subject: { text: 'answerTime' },
|
|
|
+ // content: { text: 'answerTime' },
|
|
|
+ // submitTime: { text: 'answerTime' },
|
|
|
+ // answerTime: { text: 'answerTime' },
|
|
|
+ // billState: { text: '待回复' },
|
|
|
+ // tools: {
|
|
|
+ // data: [
|
|
|
+ // { id: 'bj', name: '编辑' },
|
|
|
+ // { id: 'sc', name: '删除' }
|
|
|
+ // ]
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ modalClose () {
|
|
|
+ this.modalStatusTip = false
|
|
|
+ },
|
|
|
+ modalConfirm () {
|
|
|
+ this.$axios.post(this.$api.demandDelete, [this.detailId]).then(() => {
|
|
|
+ this.getTableData()
|
|
|
+ })
|
|
|
+ this.modalStatusTip = false
|
|
|
+ },
|
|
|
+ openDraft () {
|
|
|
+ this.showDraft = true
|
|
|
+ },
|
|
|
+ DraftBack () {
|
|
|
+ this.getTableData()
|
|
|
+ this.getDraft()
|
|
|
+ },
|
|
|
+ // 详情 编辑 弹窗操作
|
|
|
+ DetailCancel (detail) {
|
|
|
+ console.log(detail)
|
|
|
+ },
|
|
|
+ async DetailConfirm (detail) {
|
|
|
+ await this.$axios.post(this.$api.demandSubmit, detail)
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ async DetailSave (detail) {
|
|
|
+ await this.$axios.post(this.$api.demandSave, detail)
|
|
|
+ this.getDraft()
|
|
|
+ },
|
|
|
+ // 触发 新增需求弹窗
|
|
|
+ addDemand () {
|
|
|
+ this.handleDetail = {
|
|
|
+ user: true,
|
|
|
+ type: '新增需求',
|
|
|
+ userName: this.UserAndPro.userName,
|
|
|
+ detail: {}
|
|
|
+ }
|
|
|
+ this.showDetail = true
|
|
|
+ },
|
|
|
+ // 列表操作按钮的处理
|
|
|
+ rowToolHandle (handle) {
|
|
|
+ // {itemId: '1438483235070820353', toolId: 'xq'}
|
|
|
+ const { itemId, toolId } = handle
|
|
|
+ const detail = this.tableData.filter(obj => obj.id === itemId)[0]?.detail
|
|
|
+ if (toolId === 'xg') { // 修改
|
|
|
+ this.handleDetail = {
|
|
|
+ user: true,
|
|
|
+ type: '修改需求',
|
|
|
+ detail: detail
|
|
|
+ }
|
|
|
+ this.showDetail = true
|
|
|
+ } else if (toolId === 'cx') {
|
|
|
+ this.detailId = detail.id
|
|
|
+ this.modalStatusTip = true
|
|
|
+ } else {
|
|
|
+ this.handleDetail = {
|
|
|
+ user: true,
|
|
|
+ type: '详情',
|
|
|
+ detail: detail
|
|
|
+ }
|
|
|
+ this.showDetail = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 页码操作
|
|
|
+ paginationChange (page) {
|
|
|
+ // {newPage: 1, newPageSize: 40}
|
|
|
+ this.getTableData(page)
|
|
|
+ },
|
|
|
+ // 状态颜色处理
|
|
|
+ toColor (detail) {
|
|
|
+ const { submitTime, estimateTime, billState } = detail
|
|
|
+ // 待回复:蓝色 #0091FF
|
|
|
+ // 论证中回复且时间未超过的:黄色 #F58300
|
|
|
+ // 论证中回复且时间超过了:红色 #F54E45
|
|
|
+ // 待回复且时间超过了:红色 #F54E45
|
|
|
+ // 已拒绝:灰色 #8D9399
|
|
|
+ // 已接受:绿色 #34C724
|
|
|
+ // 待完善:灰色 #8D9399
|
|
|
+ // 需求状态 - 0:待提交 1:待回复 2:已接受 3:已拒绝 4:待完善 5:论证中
|
|
|
+ let color = ''
|
|
|
+ const flag = estimateTime && this.$moment(estimateTime, 'YYYYMMDDHHmmss').valueOf() < this.$moment().valueOf()
|
|
|
+ const flag2 = submitTime && this.$moment().diff(this.$moment(submitTime, 'YYYYMMDDHHmmss'), 'day') >= 7
|
|
|
+ switch (billState) {
|
|
|
+ case 1:
|
|
|
+ color = flag2 ? '#F54E45' : '#0091FF'
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ color = '#34C724'
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ color = '#8D9399'
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ color = '#8D9399'
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ color = flag ? '#F54E45' : '#F58300'
|
|
|
+ }
|
|
|
+ return color
|
|
|
+ },
|
|
|
+ // 列表数据格式处理
|
|
|
+ toTableData (data) {
|
|
|
+ const arr = []
|
|
|
+ data.forEach(obj => {
|
|
|
+ const temp = {}
|
|
|
+ temp.detail = JSON.parse(JSON.stringify(obj))
|
|
|
+ Object.keys(obj).forEach(key => {
|
|
|
+ const cell = {
|
|
|
+ text: ''
|
|
|
+ }
|
|
|
+ if (!obj[key] && obj[key] !== 0) {
|
|
|
+ cell.text = '--'
|
|
|
+ } else {
|
|
|
+ switch (key) {
|
|
|
+ case 'productLine':
|
|
|
+ cell.text = this.line[obj[key]]
|
|
|
+ break
|
|
|
+ case 'submitTime':
|
|
|
+ case 'answerTime':
|
|
|
+ cell.text = this.$moment(obj[key]).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ break
|
|
|
+ case 'billState':
|
|
|
+ cell.text = this.state[obj[key]]
|
|
|
+ cell.dot = this.toColor(temp.detail)
|
|
|
+ Object.assign(temp.detail, cell)
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ cell.text = obj[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ temp[key] = key === 'id' ? obj[key] : cell
|
|
|
+ })
|
|
|
+ if (obj.creator === this.UserAndPro.userId && obj.billState !== 2 && obj.billState !== 3 && obj.billState !== 5) {
|
|
|
+ temp.tools = obj.billState === 4 ? {
|
|
|
+ data: [
|
|
|
+ { id: 'xg', name: '修改' },
|
|
|
+ { id: 'cx', name: '撤销' }
|
|
|
+ ]
|
|
|
+ } : {
|
|
|
+ data: [
|
|
|
+ { id: 'xq', name: '详情' },
|
|
|
+ { id: 'cx', name: '撤销' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ temp.tools = {
|
|
|
+ data: [
|
|
|
+ { id: 'xq', name: '详情' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ arr.push(temp)
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ },
|
|
|
+ // 所有需求 自己需求 切换
|
|
|
+ creatorCondChange (data) {
|
|
|
+ // {id: 1, name: '我的需求'}
|
|
|
+ // this.creatorCond = data.id
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ // 搜索回车查询
|
|
|
+ pressEnter () {
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ // 处理滚动条 hover显示不挤占内容位置
|
|
|
+ toTableHeight () {
|
|
|
+ const dom = document.getElementById('tableCon-user')
|
|
|
+ if (!dom) return
|
|
|
+ this.tableHeight = dom.offsetHeight
|
|
|
+ },
|
|
|
+ // 排序操作
|
|
|
+ sortHandle (type, key) {
|
|
|
+ // ord submitTime
|
|
|
+ // ord submitTime
|
|
|
+ this.orders = [
|
|
|
+ {
|
|
|
+ column: key,
|
|
|
+ asc: type === 'seq'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ // 筛选操作
|
|
|
+ screenHandle (key, type) {
|
|
|
+ // productLine all
|
|
|
+ // billState all
|
|
|
+ console.log(type)
|
|
|
+ if (key === 'productLine') {
|
|
|
+ this.productCond = type === 'all' ? [1, 2, 3] : [Number(type)]
|
|
|
+ } else {
|
|
|
+ this.stateCond = type === 'all' ? [1, 2, 3, 4, 5] : [Number(type)]
|
|
|
+ }
|
|
|
+ this.getTableData()
|
|
|
+ },
|
|
|
+ // 获取列表
|
|
|
+ getTableData (page) {
|
|
|
+ if (page) {
|
|
|
+ if (page.newPageSize !== this.pagination.size) this.pagination.size = page.newPageSize
|
|
|
+ } else {
|
|
|
+ this.pagination.current = 1
|
|
|
+ }
|
|
|
+ this.$axios.post(this.$api.demandQuerySubmitted, {
|
|
|
+ ...this.pagination,
|
|
|
+ creatorCond: this.creatorCond, // 下拉筛选条件 - 0:所有需求 1:我的需求
|
|
|
+ matchingCond: this.matchingCond, // 模糊匹配 - 编码、主题
|
|
|
+ productCond: this.productCond, // 产线条件
|
|
|
+ stateCond: this.stateCond, // 状态条件
|
|
|
+ orders: this.orders
|
|
|
+ }).then((res) => {
|
|
|
+ const data = res.data
|
|
|
+ this.pageCount = data.count
|
|
|
+ this.tableData = this.toTableData(data.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取草稿
|
|
|
+ getDraft () {
|
|
|
+ this.$axios.post(this.$api.demandQueryDraft, {
|
|
|
+ creatorCond: 1,
|
|
|
+ matchingCond: '',
|
|
|
+ productCond: [1, 2, 3],
|
|
|
+ stateCond: [],
|
|
|
+ size: 20,
|
|
|
+ current: 1,
|
|
|
+ orders: []
|
|
|
+ }).then((res) => {
|
|
|
+ this.draft = res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ ProjectList: (state) =>
|
|
|
+ state.userInfo.projects.map(
|
|
|
+ ({ projectId: id, projectName: name, projectLocalID: localId }) => ({
|
|
|
+ id,
|
|
|
+ name,
|
|
|
+ localId
|
|
|
+ })
|
|
|
+ ),
|
|
|
+ UserAndPro (state) {
|
|
|
+ const argu = {
|
|
|
+ projectId: [],
|
|
|
+ projectLocalId: [],
|
|
|
+ userId: state.userInfo.userId,
|
|
|
+ userName: state.userInfo.userName
|
|
|
+ }
|
|
|
+
|
|
|
+ state.userInfo.projects.forEach(({ projectId, projectLocalID }) => {
|
|
|
+ argu.projectId.push(projectId)
|
|
|
+ argu.projectLocalId.push(projectLocalID)
|
|
|
+ })
|
|
|
+
|
|
|
+ return argu
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async beforeMount () {
|
|
|
+ console.log('beforeMount')
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ console.log('mounted')
|
|
|
+ window.addEventListener('resize', this.toTableHeight, false)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.toTableHeight()
|
|
|
+ // this.$ploading.local({
|
|
|
+ // el: this.$refs.localDom,
|
|
|
+ // size: 'min'
|
|
|
+ // })
|
|
|
+ this.getDraft()
|
|
|
+ this.getTableData()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ // 页面刷新机制 销毁绑定事件
|
|
|
+ window.removeEventListener('resize', this.toTableHeight, false)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .demandmanageuser{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 14px 0 16px;
|
|
|
+ .topCon{
|
|
|
+ height: 72px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .topRight{
|
|
|
+ &>div{
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mainCon{
|
|
|
+ height: calc(100% - 72px);
|
|
|
+ overflow: hidden;
|
|
|
+ .tableCon{
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ }
|
|
|
+ .pageCon{
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paginationCon {
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|