|
@@ -2,42 +2,71 @@
|
|
|
<div>
|
|
|
<Toptitle title="深化单审批产品详情">
|
|
|
<slot name="titleButton">
|
|
|
- <Button @click="goback()"
|
|
|
- type="primary"
|
|
|
- style="margin-right:10px;">返回</Button>
|
|
|
+ <Button @click="goback()" type="primary" style="margin-right:10px;"
|
|
|
+ >返回</Button
|
|
|
+ >
|
|
|
</slot>
|
|
|
</Toptitle>
|
|
|
<div class="body">
|
|
|
- <div class="header">
|
|
|
- </div>
|
|
|
+ <div class="header"></div>
|
|
|
<div class="info_wrapper">
|
|
|
<div class="info">
|
|
|
- <div class="info_item"><span>区域编码: </span><span>{{orderInfo.area_num}}</span></div>
|
|
|
- <div class="info_item"><span>区域名称: </span><span>{{orderInfo.area_title}}</span></div>
|
|
|
- <div class="info_item"><span>产品名称: </span><span>{{orderInfo.title}}</span></div>
|
|
|
- <div class="info_item"><span>数量: </span><span>{{orderInfo.num}}</span></div>
|
|
|
- <div class="info_item"><span>规格: </span><span>{{orderInfo.measure}}</span></div>
|
|
|
- <div class="info_item"><span>工艺属性: </span><span>{{orderInfo.process_property}}</span></div>
|
|
|
- <div class="info_item"><span>图号: </span><span>{{orderInfo.url_number}}</span></div>
|
|
|
- <div class="info_item"><span>图纸: </span><span>{{orderInfo.url}}</span></div>
|
|
|
- <div class="info_item"><span>左右式: </span><span>{{orderInfo.end_time}}</span></div>
|
|
|
- <div class="info_item"><span>价格: </span><span>{{orderInfo.price}}</span></div>
|
|
|
- <div class="info_item"><span>备注: </span><span>{{orderInfo.remark}}</span></div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>区域编码: </span><span>{{ orderInfo.area_num }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>区域名称: </span><span>{{ orderInfo.area_title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>产品名称: </span><span>{{ orderInfo.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>数量: </span><span>{{ orderInfo.num }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>规格: </span><span>{{ orderInfo.measure }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>工艺属性: </span><span>{{ orderInfo.process_property }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>图号: </span><span>{{ orderInfo.url_number }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>图纸: </span><span>{{ orderInfo.url }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>左右式: </span
|
|
|
+ ><span>{{
|
|
|
+ orderInfo.left_right_mode == 1
|
|
|
+ ? "左式"
|
|
|
+ : orderInfo.left_right_mode == 2
|
|
|
+ ? "右式"
|
|
|
+ : "无"
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>价格: </span><span>{{ orderInfo.price }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info_item">
|
|
|
+ <span>备注: </span><span>{{ orderInfo.remark }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <div class="content_header">
|
|
|
- </div>
|
|
|
+ <div class="content_header"></div>
|
|
|
<div class="addArea">
|
|
|
<div class="addAreaTable">
|
|
|
- <Table :columns="tableColumns"
|
|
|
- :data="tableData"
|
|
|
- max-height="600"
|
|
|
- border>
|
|
|
- <template slot="Set"
|
|
|
- slot-scope="{row,index}">
|
|
|
- <a style="margin:0 5px"
|
|
|
- @click="handleSet(row,index,3)">详情</a>
|
|
|
+ <Table
|
|
|
+ :columns="tableColumns"
|
|
|
+ :data="tableData"
|
|
|
+ max-height="600"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <template slot="Set" slot-scope="{ row, index }">
|
|
|
+ <a style="margin:0 5px" @click="handleSet(row, index, 3)"
|
|
|
+ >详情</a
|
|
|
+ >
|
|
|
</template>
|
|
|
</Table>
|
|
|
</div>
|
|
@@ -52,102 +81,145 @@
|
|
|
// 例如:import 《组件名称》 from '《组件路径》';
|
|
|
|
|
|
export default {
|
|
|
- name: '',
|
|
|
- components: {
|
|
|
-
|
|
|
- },
|
|
|
+ name: "",
|
|
|
+ components: {},
|
|
|
props: {},
|
|
|
// import引入的组件需要注入到对象中才能使用
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
setpContent: [],
|
|
|
orderInfo: {},
|
|
|
type: null,
|
|
|
tableColumns: [
|
|
|
- { title: '序号', type: 'index', key: '', align: 'center', minWidth: 80 },
|
|
|
- { title: '楼栋', key: 'house', align: 'center', tooltip: true, minWidth: 100 },
|
|
|
- { title: '楼单元', key: 'unit', align: 'center', minWidth: 80 },
|
|
|
- { title: '楼层', key: 'layer', align: 'center', minWidth: 80 },
|
|
|
- { title: '房间号', key: 'room', align: 'center', tooltip: true, minWidth: 140 },
|
|
|
- { title: '产品', key: 'title', align: 'center', tooltip: true, minWidth: 120 },
|
|
|
- { title: '价格', key: 'price', align: 'center', minWidth: 80 },
|
|
|
- { title: '计量单位', key: 'unit', align: 'center', minWidth: 80 },
|
|
|
- { title: '位置', key: 'price', align: 'center', minWidth: 80 },
|
|
|
{
|
|
|
- title: '图纸', align: 'center', key: 'url', minWidth: 100,
|
|
|
+ title: "序号",
|
|
|
+ type: "index",
|
|
|
+ key: "",
|
|
|
+ align: "center",
|
|
|
+ minWidth: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "楼栋",
|
|
|
+ key: "house",
|
|
|
+ align: "center",
|
|
|
+ tooltip: true,
|
|
|
+ minWidth: 100,
|
|
|
+ },
|
|
|
+ { title: "楼单元", key: "unit", align: "center", minWidth: 80 },
|
|
|
+ { title: "楼层", key: "layer", align: "center", minWidth: 80 },
|
|
|
+ {
|
|
|
+ title: "房间号",
|
|
|
+ key: "room",
|
|
|
+ align: "center",
|
|
|
+ tooltip: true,
|
|
|
+ minWidth: 140,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "产品",
|
|
|
+ key: "title",
|
|
|
+ align: "center",
|
|
|
+ tooltip: true,
|
|
|
+ minWidth: 120,
|
|
|
+ },
|
|
|
+ { title: "价格", key: "price", align: "center", minWidth: 80 },
|
|
|
+ { title: "计量单位", key: "unit", align: "center", minWidth: 80 },
|
|
|
+ { title: "位置", key: "price", align: "center", minWidth: 80 },
|
|
|
+ {
|
|
|
+ title: "图纸",
|
|
|
+ align: "center",
|
|
|
+ key: "url",
|
|
|
+ minWidth: 100,
|
|
|
render: (h, params) => {
|
|
|
- const { row } = params
|
|
|
- let url = row.url ? row.url : []
|
|
|
- return h('img', {
|
|
|
+ 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;'
|
|
|
+ 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 })
|
|
|
- });
|
|
|
+ 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: ''
|
|
|
- })
|
|
|
+ baseImgField: "img_url",
|
|
|
+ baseTitleField: "",
|
|
|
+ });
|
|
|
// })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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,
|
|
|
},
|
|
|
- { 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 },
|
|
|
],
|
|
|
tableData: [],
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
// 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
- created () {
|
|
|
- let id = this.$route.query.currency_type
|
|
|
- this.type = id == 78 ? 3 : id == 74 ? 1 : id == 82 ? 2 : ''
|
|
|
+ created() {
|
|
|
+ let id = this.$route.query.currency_type;
|
|
|
+ this.type = id == 78 ? 3 : id == 74 ? 1 : id == 82 ? 2 : "";
|
|
|
},
|
|
|
// 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
this.axios({
|
|
|
- method: 'get',
|
|
|
- url: '/api/order_price_oa_take_product_detail',
|
|
|
+ method: "get",
|
|
|
+ url: "/api/order_price_oa_take_product_detail",
|
|
|
params: {
|
|
|
- oa_id: this.$route.query.oa_id
|
|
|
- }
|
|
|
- }).then((res) => {
|
|
|
- this.orderInfo = res.data
|
|
|
- this.tableData = res.data.product
|
|
|
- }).catch((err) => { });
|
|
|
+ oa_id: this.$route.query.oa_id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.orderInfo = res.data;
|
|
|
+ this.tableData = res.data.product;
|
|
|
+ })
|
|
|
+ .catch((err) => {});
|
|
|
},
|
|
|
methods: {
|
|
|
- handleSet () { },
|
|
|
- goback () { this.$router.go(-1) },
|
|
|
+ handleSet() {},
|
|
|
+ goback() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
},
|
|
|
// 监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
// 监控data中的数据变化
|
|
|
watch: {},
|
|
|
- beforeCreate () { }, // 生命周期 - 创建之前
|
|
|
- beforeMount () { }, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate () { }, // 生命周期 - 更新之前
|
|
|
- updated () { }, // 生命周期 - 更新之后
|
|
|
- beforeDestroy () { }, // 生命周期 - 销毁之前
|
|
|
- destroyed () { }, // 生命周期 - 销毁完成
|
|
|
- activated () { }, // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
-}
|
|
|
+ beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
+ updated() {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed() {}, // 生命周期 - 销毁完成
|
|
|
+ activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang='scss' scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.body {
|
|
|
margin-top: 10px;
|
|
|
.header {
|