|
@@ -0,0 +1,288 @@
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <Toptitle title="工装单审批详情">
|
|
|
|
+ <slot name="titleButton">
|
|
|
|
+ <Button @click="approval(1)"
|
|
|
|
+ type="success"
|
|
|
|
+ style="margin-right:10px;">通过</Button>
|
|
|
|
+ <Button @click="approval(2)"
|
|
|
|
+ type="error"
|
|
|
|
+ style="margin-right:10px;">驳回</Button>
|
|
|
|
+ <Button @click="goback()"
|
|
|
|
+ type="primary"
|
|
|
|
+ style="margin-right:10px;">返回</Button>
|
|
|
|
+ </slot>
|
|
|
|
+ </Toptitle>
|
|
|
|
+ <div class="body">
|
|
|
|
+ <div class="header">
|
|
|
|
+ <Steps :current="2">
|
|
|
|
+ <Step title="开始审批"></Step>
|
|
|
|
+ <Step title="1级审批"></Step>
|
|
|
|
+ <Step title="2级审批"></Step>
|
|
|
|
+ <Step title="审批完成"></Step>
|
|
|
|
+ </Steps>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info_wrapper">
|
|
|
|
+ <div class="info">
|
|
|
|
+ <div class="info_item"><span>制单人:</span><span>{{orderInfo.nickname}}</span></div>
|
|
|
|
+ <div class="info_item"><span>采购类型:</span><span>{{orderInfo.type_title}}</span></div>
|
|
|
|
+ <div class="info_item"><span>项目名称:</span><span>{{orderInfo.client_name}}</span></div>
|
|
|
|
+ <div class="info_item"><span>单据号:</span><span>{{orderInfo.order_no}}</span></div>
|
|
|
|
+ <div class="info_item"><span>制单日期:</span><span>{{func.replaceDate(orderInfo.crt_time)}}</span></div>
|
|
|
|
+ <div class="info_item"><span>预计到货日期:</span><span>{{func.replaceDate(orderInfo.arrive_time)}}</span></div>
|
|
|
|
+ <div class="info_item"><span>备注:</span><span>采购需要快点,生产部等着要</span></div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="info_fixed">
|
|
|
|
+ <Steps :current="99"
|
|
|
|
+ size="small"
|
|
|
|
+ direction="vertical">
|
|
|
|
+ <Step v-for="item in oaInfo"
|
|
|
|
+ :key="item.level">
|
|
|
|
+ <div slot="title">
|
|
|
|
+ {{func.replaceDate(item.upd_time)}}
|
|
|
|
+ 审批人:{{item.nickname}}
|
|
|
|
+ </div>
|
|
|
|
+ </Step>
|
|
|
|
+ </Steps>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="tableContent">
|
|
|
|
+ <div class="table_title">请购清单</div>
|
|
|
|
+ <Table :columns="purchaseColumus" :data="purchaseData">
|
|
|
|
+ <template slot="materiel_specs" slot-scope="{ row }">
|
|
|
|
+ <div>
|
|
|
|
+ {{ row.long ? row.long : 0 }}*{{ row.width ? row.width : 0 }}*{{
|
|
|
|
+ row.high ? row.high : 0
|
|
|
|
+ }}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template slot="untaxed_price" slot-scope="{ row }">
|
|
|
|
+ <div>
|
|
|
|
+ {{row.price-row.price*row.fax}}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template slot="untaxed_price_total" slot-scope="{ row }">
|
|
|
|
+ <div>
|
|
|
|
+ {{(row.price-row.price*row.fax)*row.num}}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template slot="tax_amount" slot-scope="{ row }">
|
|
|
|
+ <div>
|
|
|
|
+ {{row.price*row.fax}}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template slot="price_total" slot-scope="{ row }">
|
|
|
|
+ <div>
|
|
|
|
+ {{row.price*row.num}}
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </Table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
|
|
|
+// 例如:import 《组件名称》 from '《组件路径》';
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: '',
|
|
|
|
+ components: {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ props: {},
|
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
|
+ data () {
|
|
|
|
+ // 这里存放数据
|
|
|
|
+ return {
|
|
|
|
+ setpContent: [],
|
|
|
|
+ orderInfo: {},
|
|
|
|
+ oaInfo: [],
|
|
|
|
+ type: null,
|
|
|
|
+ purchaseColumus:[
|
|
|
|
+ { title: '项目名称', key: '', align: 'center', minWidth: 92 },
|
|
|
|
+ { title: '物料分类', key: 'type_title', align: 'center', minWidth: 92 },
|
|
|
|
+ { title: '物料名称', key: 'title', align: 'center', minWidth: 92 },
|
|
|
|
+ { title: '物料规格', key: '', align: 'center', minWidth: 92, slot: "materiel_specs"},
|
|
|
|
+ { title: '计量单位', key: 'unit', align: 'center', minWidth: 92 },
|
|
|
|
+ { title: '采购数量', key: 'num', align: 'center', minWidth: 92 },
|
|
|
|
+ { title: '无税单价', key: '', align: 'center', minWidth: 92 ,slot:'untaxed_price'},
|
|
|
|
+ { title: '税率', key: 'fax', align: 'center', minWidth: 70 },
|
|
|
|
+ { title: '含税单价', key: 'price', align: 'center', minWidth: 92 },
|
|
|
|
+ { title: '无税金额', key: '', align: 'center', minWidth: 92 ,slot:'untaxed_price_total'},
|
|
|
|
+ { title: '税额', key: '', align: 'center', minWidth: 70 ,slot:'tax_amount'},
|
|
|
|
+ { title: '价格合计', key: '', align: 'center', minWidth: 92 ,slot:'price_total'},
|
|
|
|
+ ],
|
|
|
|
+ purchaseData:[],
|
|
|
|
+ // tableColumns: [
|
|
|
|
+ // { title: '序号', type: 'index', key: '', align: 'center', minWidth: 80 },
|
|
|
|
+ // { title: '产品名称', key: 'title', align: 'center', tooltip: true, minWidth: 100 },
|
|
|
|
+ // { title: '数量', key: 'num', align: 'center', minWidth: 80 },
|
|
|
|
+ // { title: '价格', key: 'price', align: 'center', minWidth: 80 },
|
|
|
|
+ // { title: '规格', key: 'measure', align: 'center', tooltip: true, minWidth: 140 },
|
|
|
|
+ // { title: '工艺属性', key: 'process_property', align: 'center', tooltip: true, minWidth: 120 },
|
|
|
|
+ // {
|
|
|
|
+ // title: '图纸', align: 'center', key: 'url', minWidth: 100,
|
|
|
|
+ // render: (h, params) => {
|
|
|
|
+ // const { row } = params
|
|
|
|
+ // let url = row.url ? row.url : []
|
|
|
|
+ // return h('img', {
|
|
|
|
+ // attrs: {
|
|
|
|
+ // src: this.$store.state.ip + url[0],
|
|
|
|
+ // style: 'max-width:50px;max-height:50px;position:relative;top:3px;'
|
|
|
|
+ // },
|
|
|
|
+ // on: {
|
|
|
|
+ // click: (e) => {
|
|
|
|
+ // // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
|
|
|
|
+ // // row.imgs = res.data
|
|
|
|
+ // let list = []
|
|
|
|
+ // url.length > 0 && url.forEach(el => {
|
|
|
|
+ // list.push({ img_url: el })
|
|
|
|
+ // });
|
|
|
|
+ // this.$previewImg({
|
|
|
|
+ // list,
|
|
|
|
+ // baseUrl: this.$store.state.ip,
|
|
|
|
+ // baseImgField: 'img_url',
|
|
|
|
+ // baseTitleField: ''
|
|
|
|
+ // })
|
|
|
|
+ // // })
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ // { title: '左右式', key: '', align: 'center', tooltip: true, minWidth: 80 },
|
|
|
|
+ // { title: '图号', key: 'url_number', align: 'center', tooltip: true, minWidth: 80 },
|
|
|
|
+ // { title: '备注', key: 'remark', align: 'center', minWidth: 80 },
|
|
|
|
+ // // { title: '操作', key: 'remark', align: 'center', slot: 'Set', minWidth: 120 },
|
|
|
|
+ // ],
|
|
|
|
+ isOpen: false,
|
|
|
|
+ btnLoading: false,
|
|
|
|
+ fullAreaList: [],
|
|
|
|
+ singleAreaList: [],
|
|
|
|
+ warningList: [],
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
|
+ created () {
|
|
|
|
+ this.axios({
|
|
|
|
+ method: 'get',
|
|
|
|
+ url: '/api/order_oa_detail',
|
|
|
|
+ params: {
|
|
|
|
+ order_no: this.$route.query.order_no,
|
|
|
|
+ type: this.$route.query.type
|
|
|
|
+ }
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ this.orderInfo = res.data
|
|
|
|
+ // this.oaInfo = res.data.__ob__
|
|
|
|
+ // this.areaList = [res.data.area]
|
|
|
|
+ // this.singleAreaList = JSON.parse(JSON.stringify([res.data.area]))
|
|
|
|
+ this.purchaseData = res.data.list;
|
|
|
|
+ console.log(res)
|
|
|
|
+ }).catch((err) => { });
|
|
|
|
+ },
|
|
|
|
+ // 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
|
+ mounted () {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleSet () { },
|
|
|
|
+ approval (status) {
|
|
|
|
+ let params = {
|
|
|
|
+ status,
|
|
|
|
+ type: this.type,
|
|
|
|
+ oa_order_no: this.$route.query.oa_order_no
|
|
|
|
+ }
|
|
|
|
+ this.axios.post('/api/order_price_oa_pull', params).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.$Message.success(res.msg || '无提示')
|
|
|
|
+ // this.goback()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ goback () { this.$router.go(-1) },
|
|
|
|
+ handleShowMore () {
|
|
|
|
+ if (this.fullAreaList.length > 0) {
|
|
|
|
+ this.areaList = this.isOpen ? JSON.parse(JSON.stringify(this.singleAreaList)) : JSON.parse(JSON.stringify(this.fullAreaList))
|
|
|
|
+ this.isOpen = !this.isOpen
|
|
|
|
+ } else {
|
|
|
|
+ this.btnLoading = true
|
|
|
|
+ this.axios({
|
|
|
|
+ method: 'get',
|
|
|
|
+ url: '/api/order_price_oa_deep_area_detail',
|
|
|
|
+ params: {
|
|
|
|
+ oa_order_no: this.$route.query.oa_order_no
|
|
|
|
+ }
|
|
|
|
+ }).then((res) => {
|
|
|
|
+ this.isOpen = !this.isOpen
|
|
|
|
+ this.fullAreaList = JSON.parse(JSON.stringify(res.data))
|
|
|
|
+ this.areaList = res.data
|
|
|
|
+ this.btnLoading = false
|
|
|
|
+ }).catch((err) => { });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ // 监听属性 类似于data概念
|
|
|
|
+ computed: {},
|
|
|
|
+ // 监控data中的数据变化
|
|
|
|
+ watch: {},
|
|
|
|
+ beforeCreate () { }, // 生命周期 - 创建之前
|
|
|
|
+ beforeMount () { }, // 生命周期 - 挂载之前
|
|
|
|
+ beforeUpdate () { }, // 生命周期 - 更新之前
|
|
|
|
+ updated () { }, // 生命周期 - 更新之后
|
|
|
|
+ beforeDestroy () { }, // 生命周期 - 销毁之前
|
|
|
|
+ destroyed () { }, // 生命周期 - 销毁完成
|
|
|
|
+ activated () { }, // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
+.body {
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ .tableContent{
|
|
|
|
+ .table_title{
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ height: 36px;
|
|
|
|
+ border-top: 1px solid #F4F4F4;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .header {
|
|
|
|
+ margin: 20px 10px;
|
|
|
|
+ }
|
|
|
|
+ .info_wrapper {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ .info {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ .info_item {
|
|
|
|
+ width: 180px;
|
|
|
|
+ padding: 0 10px 10px 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .info_fixed {
|
|
|
|
+ width: 100%;
|
|
|
|
+ max-height: 150px;
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ padding-left: 5px;
|
|
|
|
+ border: 1px solid #ffffbb;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ background-color: #ffffbb;
|
|
|
|
+ text-align: center;
|
|
|
|
+ /deep/.ivu-steps-head-inner {
|
|
|
|
+ margin: 0;
|
|
|
|
+ }
|
|
|
|
+ /deep/.ivu-steps-title,
|
|
|
|
+ /deep/.ivu-steps-head {
|
|
|
|
+ background: transparent;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|