123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564 |
- <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: 'modifiedTime',
- // asc: false
- // }
- ],
- draft: {
- data: [],
- count: 0
- },
- line: { 1: '业务', 2: '研发', 3: '实施' },
- state: { 1: '待回复', 2: '已接受', 3: '已拒绝', 4: '待完善', 5: '论证中' },
- header: [
- {
- key: 'userName',
- text: '用户名',
- width: 130
- },
- {
- 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: 190,
- sort: { open: true, event: 'sortHandle' }
- },
- {
- key: 'answerTime',
- text: '回复时间',
- width: 190,
- 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') >= 2
- 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 () {
- // {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>
|