This commit is contained in:
宋伟佳
2021-06-10 09:28:17 +08:00
16 changed files with 1248 additions and 839 deletions
@@ -0,0 +1,32 @@
<!-- 流程信息公共标题 -->
<template>
<div class="contentTitle">
<div class="titleIcon"></div>
<div class="titleText"><slot name="title"></slot></div>
</div>
</template>
<script>
export default {
name: "ProcessTitle"
}
</script>
<style scoped lang="less">
.contentTitle {
height: 30px;
display: flex;
align-items: center;
color: #E6A23C;
.titleIcon{
background: #E6A23C;
width: 3px;
height: 14px;
}
.titleText{
margin-left: 10px;
font-size: 16px;
font-weight: bold;
}
}
</style>
@@ -0,0 +1,363 @@
<template>
<div class="bzffStep1">
<!-- 标准发放申请流程流程-->
<ProcessHeader toggle>
<template slot="proName">标准发放申请流程</template>
<template slot="proNode">申请人发起流程</template>
</ProcessHeader>
<div class="headerTabs">
<div class="headerTabsItem" :class="active === '1' ? 'active' : ''" @click="handleTabs('1')">基础信息</div>
<div class="headerTabsItem" :class="active === '2' ? 'active' : ''" @click="handleTabs('2')">审批历史</div>
</div>
<div class="content" v-if="active === '1'">
<ProcessTitle>
<template slot="title">基础信息</template>
</ProcessTitle>
<el-form
ref="qbkwForm"
:model="form"
class="label-input-form prc-content-border"
label-width="150px"
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="类型" prop="type" class="add-form-item form-item-disabled">
<el-radio-group v-model="form.type">
<el-radio label="1">北汽福田内部</el-radio>
<el-radio label="2">供应商</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="申请单位" prop="orgName" class="add-form-item form-item-disabled">
<el-input
v-model="form.orgName"
clearable
readonly
disabled
></el-input>
</el-form-item>
<el-form-item label="申请人" prop="account" class="add-form-item form-item-disabled">
<el-input
v-model="form.account"
clearable
readonly
disabled
></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="mobilePhone" class="add-form-item form-item-disabled">
<el-input
v-model="form.mobilePhone"
placeholder="请输入联系电话"
clearable
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email" class="add-form-item form-item-disabled">
<el-input
v-model="form.email"
placeholder="请输入邮箱"
clearable
></el-input>
</el-form-item>
<el-form-item label="申请完成时间" prop="time" class="add-form-item form-item-disabled">
<el-date-picker
v-model="form.time"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="版本格式" prop="edition" class="add-form-item form-item-disabled">
<el-radio-group v-model="form.edition">
<el-radio label="1">在线复制</el-radio>
<el-radio label="2">纸质 -- 打印</el-radio>
<el-radio label="3">电子 -- 下载</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="申请理由" prop="reason" class="add-form-item form-item-disabled">
<el-input
type="textarea"
:rows="4"
resize="none"
placeholder="请输入申请理由"
v-model="form.reason">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<ProcessTitle>
<template slot="title">填写信息</template>
</ProcessTitle>
<div class="tableTitle">
发放申请列表
<div class="tableButton">
<el-button plain class="common-button-primary" size="mini" @click="addList">添加</el-button>
<el-button plain class="common-button-primary" size="mini">删除</el-button>
</div>
</div>
<el-table
:data="data"
border
style="width: 100%"
:header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
fontWeight: 'bold', height: '48px'}">
<el-table-column
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column
type="index"
width="55"
label="序号"
align="center">
</el-table-column>
<el-table-column
prop="content"
label="标准号"
>
</el-table-column>
<el-table-column
prop="deptName"
label="标准名称"
>
</el-table-column>
<el-table-column
prop="remarks"
label="备注"
>
</el-table-column>
</el-table>
<el-collapse accordion>
<el-collapse-item title="意见填写">
<div style="margin: 10px 0;">
<el-input
type="textarea"
:rows="3"
resize="none"
placeholder="请输入意见"
v-model="textarea">
</el-input>
</div>
<div>文件需求日期应从该申请单审批完成后2日开始计算日翻译量10000字符可以每页700-800字符估算周末及节假日除外</div>
</el-collapse-item>
</el-collapse>
</div>
<div class="content" v-if="active === '2'">
<div class="block" style="padding-top: 20px;">
<el-timeline>
<el-timeline-item timestamp="发起流程" placement="top" :color="user1 ? '#66b1ff' : ''">
<el-card>
<h4>流程发起人</h4>
<div style="margin-top: 10px;">
<el-input v-model="user1" placeholder="请输入"></el-input>
</div>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="选择责任人" placement="top" :color="user2 ? '#66b1ff' : ''">
<el-card>
<h4>责任对接人</h4>
<div style="margin-top: 10px;">
<el-input v-model="user2" placeholder="请输入">
</el-input></div>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="填写意见" placement="top" :color="user3 ? '#66b1ff' : ''">
<el-card>
<h4>责任人</h4>
<div style="margin-top: 10px;">
<el-input v-model="user3" placeholder="请输入"></el-input>
</div>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="意见汇总并发起会签" placement="top" :color="user4 ? '#66b1ff' : ''">
<el-card>
<h4>标准法规工程师</h4>
<div style="margin-top: 10px;">
<el-input v-model="user4" placeholder="请输入"></el-input>
</div>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="审核" placement="top" :color="user5 ? '#66b1ff' : ''">
<el-card>
<h4>责任对接人标准法规部部门负责人</h4>
<div style="margin-top: 10px;">
<el-input v-model="user5" placeholder="请输入"></el-input>
</div>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</div>
<!-- 新增抽屉-->
<el-drawer
:title="title"
:visible.sync="ListModel"
size="800px"
custom-class="demo-drawer"
>
<div class="demo-drawer-content add-demo">
<el-form
ref="qbkwForm"
:model="ListForm"
class="label-input-form prc-content-border"
label-width="150px"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="标准号" prop="standCode" class="add-form-item form-item-disabled">
<el-input
placeholder="请输入标准号"
v-model="ListForm.account"
clearable
></el-input>
</el-form-item>
<el-form-item label="标准名称" prop="standCode" class="add-form-item form-item-disabled">
<el-input
v-model="ListForm.mobilePhone"
placeholder="请输入标准名称"
clearable
></el-input>
</el-form-item>
<el-form-item label="备注" prop="standCode" class="add-form-item form-item-disabled">
<el-input
v-model="ListForm.remarks"
placeholder="请输入备注"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="demo-drawer-footer">
<el-button size="mini" @click="closeDrawer">取消</el-button>
<el-button type="primary" size="mini" @click="OkDrawer">确定</el-button>
</div>
</el-drawer>
<ProcessFooter
show-save
show-submit
:submitLoading="isSubmit"
:saveLoading="saveLoading"
@save="handleSave"
@submit="handleSubmit"
>
</ProcessFooter>
</div>
</template>
<script>
import ProcessHeader from '../../components/ProcessHeader'
import ProcessFooter from '../../components/ProcessFooter'
import ProcessTitle from '../../components/ProcessTitle'
export default {
name: "bzffStep1",
data () {
return {
textarea: '', // 意见
title: '', // 新增编辑抽屉标题
ListModel: false, // 新增编辑抽屉开关
active: '1', // 默认显示
isSubmit: false,
saveLoading: false,
form: {
orgName: this.$store.getters.userInfo.orgName,
orgId: this.$store.getters.userInfo.orgId,
account: this.$store.getters.userInfo.account,
userId: this.$store.getters.userInfo.userId,
mobilePhone: this.$store.getters.userInfo.mobilePhone,
email: this.$store.getters.userInfo.email,
type: '',
time: '',
edition: '',
reason: ''
}, // 基础信息
data: [], // 标准列表数据
ListForm: {}, // 新增数据
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
}
},
components: {
ProcessHeader,
ProcessFooter,
ProcessTitle
},
methods: {
closeDrawer() {
this.ListModel = false
},
OkDrawer() {
this.ListModel = false
var item = {
remarks: '123'
}
this.data.push(item)
},
addList() {
this.title = '新增标准'
this.ListModel = true
},
handleTabs(name) {
this.active = name
},
handleSave() {},
handleSubmit() {}
},
mounted () {}
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/style';
.bzffStep1 {
/deep/.el-drawer__container {
.prc-content-border {
border: none;
padding: 0 20px 0;
}
}
position: relative;
height: 100%;
.headerTabs {
height: 52px;
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 10px;
.headerTabsItem {
border: 1px solid #c1c1c1;
padding: 0 5px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.active {
border: 1px solid #E6A23C;
color: #fff;
background: #E6A23C;
}
}
.content {
height: calc(~'100% - 103px');
overflow: auto;
.tableTitle {
margin-bottom: 10px;
height: 30px;
line-height: 30px;
position: relative;
font-size: 13px;
font-weight: bold;
.tableButton {
position: absolute;
right: 0;
top: 0;
}
}
}
}
</style>
@@ -10,9 +10,9 @@
<div class="headerTabsItem" :class="active === '2' ? 'active' : ''" @click="handleTabs('2')">审批历史</div>
</div>
<div class="content" v-if="active === '1'">
<div class="contentTitle">
<div class="titleIcon"></div><div class="titleText">基础信息</div>
</div>
<ProcessTitle>
<template slot="title">基础信息</template>
</ProcessTitle>
<el-form
ref="qbkwForm"
:model="form"
@@ -54,9 +54,9 @@
</el-col>
</el-row>
</el-form>
<div class="contentTitle">
<div class="titleIcon"></div><div class="titleText">填写信息</div>
</div>
<ProcessTitle>
<template slot="title">填写信息</template>
</ProcessTitle>
<div class="tableTitle">
标准需求列表
<div class="tableButton">
@@ -304,6 +304,7 @@
<script>
import ProcessHeader from '../../components/ProcessHeader'
import ProcessFooter from '../../components/ProcessFooter'
import ProcessTitle from '../../components/ProcessTitle'
export default {
name: "bzfyStep1",
data () {
@@ -333,7 +334,8 @@
},
components: {
ProcessHeader,
ProcessFooter
ProcessFooter,
ProcessTitle
},
methods: {
closeDrawer() {
@@ -62,6 +62,9 @@ export default {
// 标准需求(翻译)申请流程
break
case '5':
this.$router.push({
name: 'bzffStep1'
})
// 标准发放申请流程
break
case '6':
+9
View File
@@ -221,6 +221,15 @@ const routes = [
requireAuth: true,
title: '标准需求(翻译)申请流程'
}
},
{
path: '/bzffStep1',
name: 'bzffStep1',
component: () => import('@/pages/processCenter/pages/creatProcess/bzff/step1.vue'),
meta: {
requireAuth: true,
title: '标准发放申请流程'
}
}
]
},