|
|
@@ -0,0 +1,268 @@
|
|
|
+<template>
|
|
|
+ <div id="out">
|
|
|
+ <el-row>
|
|
|
+ <animates>
|
|
|
+ <el-col :span="24" class="container">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <data-table :fields="fields" :data="list" :opera="opera" :total="total" :size="50" :step="10" @query="search" v-if="!dialog" @see="see">
|
|
|
+ <template #options="{item}">
|
|
|
+ <template v-if="item.model == 'name'">
|
|
|
+ <el-option v-for="(item, index) in nameList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'contract'">
|
|
|
+ <el-option v-for="(item, index) in contractList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'project'">
|
|
|
+ <el-option v-for="(item, index) in projectList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'route'">
|
|
|
+ <el-option v-for="(item, index) in routeList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.model == 'way'">
|
|
|
+ <el-option v-for="(item, index) in wayList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </data-table>
|
|
|
+ <el-col :span="24" class="detail" v-else>
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button>
|
|
|
+ <span>支出详情</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="head">
|
|
|
+ <el-col :span="12" style="text-align:center">流水账号：xxxx</el-col>
|
|
|
+ <el-col :span="12" style="text-align:left">订单号：xxxx</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>货物列表</span>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <data-table :fields="detailFields" :data="detailList" :usePage="false"> </data-table>
|
|
|
+ </div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ </el-card>
|
|
|
+ <el-col :span="24" class="rate">
|
|
|
+ <el-col :span="6" class="rateMoney">税前应收:{{ detailList1.cost1 }}</el-col>
|
|
|
+ <el-col :span="6" class="rateMoney">税后应收:{{ detailList1.cost2 }}</el-col>
|
|
|
+ <el-col :span="6" class="rateMoney">税前实收:{{ detailList1.cost3 }}</el-col>
|
|
|
+ <el-col :span="6" class="rateMoney">税后应收:{{ detailList1.cost4 }}</el-col>
|
|
|
+ <el-col :span="24" class="tip"
|
|
|
+ ><span>关于长途运费:若是改成 他运且想根据设置的不同方式进行计算 需要重新生成订单,目前还无法处理这种情况</span></el-col
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <!-- <div style="margin-bottom: 20px; text-align:right">
|
|
|
+ <el-button size="small" @click="addTab(editableTabsValue)">
|
|
|
+ + 添加支出
|
|
|
+ </el-button>
|
|
|
+ </div> -->
|
|
|
+ <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
|
|
|
+ <!-- <div style="margin-bottom: 20px; text-align:right">
|
|
|
+ <el-button size="small" @click="addTab(editableTabsValue)">
|
|
|
+ + 添加支出
|
|
|
+ </el-button>
|
|
|
+ </div> -->
|
|
|
+ <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="`支出${index + 1}`" :name="`${index}`">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form ref="form" label-width="90px" :inline="true">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="支出项">
|
|
|
+ <el-select v-model="item.cost" placeholder="请选择支出项">
|
|
|
+ <el-option v-for="(item, index) in costList" :key="index" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-form-item label="供应商方式">
|
|
|
+ <el-radio-group v-model="item.supplierway">
|
|
|
+ <el-radio label="自运"></el-radio>
|
|
|
+ <el-radio label="他运"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="供应商">
|
|
|
+ <el-select v-model="item.supplier" placeholder="请选择供应商">
|
|
|
+ <el-option v-for="(item, index) in supplierList" :key="index" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同">
|
|
|
+ <el-select v-model="item.supplier" placeholder="请选择合同">
|
|
|
+ <el-option v-for="(item, index) in contractList" :key="index" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="税率">
|
|
|
+ <el-select v-model="item.rate" placeholder="请选择合同">
|
|
|
+ <el-option v-for="(item, index) in rateList" :key="index" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="税前应付">
|
|
|
+ <el-input v-model="detailList1.cost1"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="税后应付">
|
|
|
+ <el-input v-model="detailList1.cost2"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="税前实付">
|
|
|
+ <el-input v-model="detailList1.cost3"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="税前实付">
|
|
|
+ <el-input v-model="detailList1.cost4"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input type="textarea" v-model="item.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </animates>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ name: 'out',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ dialog: true,
|
|
|
+ fields: [
|
|
|
+ { label: '订单号', model: 'num', filter: 'input' },
|
|
|
+ { label: '客户', model: 'name', filter: 'select' },
|
|
|
+ { label: '长途运费金额', model: 'money' },
|
|
|
+ { label: '合同', model: 'contract', notable: 'true', filter: 'select' },
|
|
|
+ { label: '项目', model: 'project', notable: 'true', filter: 'select' },
|
|
|
+ { label: '线路', model: 'route', notable: 'true', filter: 'select' },
|
|
|
+ { label: '付费方式', model: 'way', notable: 'true', filter: 'select' },
|
|
|
+ ],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ name: 'xxx有限公司',
|
|
|
+ num: 'AW-YS-ZF-2018-005',
|
|
|
+ money: 100,
|
|
|
+ way: '银行转账',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ total: 0,
|
|
|
+ opera: [{ label: '查看', method: 'see' }],
|
|
|
+ //客户列表
|
|
|
+ nameList: [{ name: '客户一' }, { name: '客户二' }],
|
|
|
+ //合同列表
|
|
|
+ contractList: [{ name: '合同一' }, { name: '合同二' }],
|
|
|
+ //项目列表
|
|
|
+ projectList: [{ name: '项目一' }, { name: '项目二' }],
|
|
|
+ //线路列表
|
|
|
+ routeList: [{ name: '线路一' }, { name: '线路二' }],
|
|
|
+ //付费方式列表
|
|
|
+ wayList: [{ name: '方式一' }, { name: '方式二' }],
|
|
|
+ detailFields: [
|
|
|
+ { label: '货物', model: 'goods' },
|
|
|
+ { label: '数量', model: 'number' },
|
|
|
+ { label: '重量(t)', model: 'weight' },
|
|
|
+ { label: '体积(m²)', model: 'volume' },
|
|
|
+ ],
|
|
|
+ detailList: [
|
|
|
+ {
|
|
|
+ goods: '真皮',
|
|
|
+ number: '3',
|
|
|
+ weight: '40',
|
|
|
+ volume: '50',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ detailList1: {
|
|
|
+ cost1: '200',
|
|
|
+ cost2: '300',
|
|
|
+ cost3: '400',
|
|
|
+ cost4: '500',
|
|
|
+ },
|
|
|
+ editableTabsValue: '1',
|
|
|
+ editableTabs: [],
|
|
|
+ tabIndex: 0,
|
|
|
+ //支出项列表
|
|
|
+ costList: [{ name: '罚款' }, { name: '过桥费' }, { name: '油费' }, { name: '长途运费' }],
|
|
|
+ //供应商列表
|
|
|
+ supplierList: [{ name: '供应商一' }, { name: '供应商二' }],
|
|
|
+ //合同列表
|
|
|
+ // contractList: [{ name: '合同一' }, { name: '合同二' }],
|
|
|
+ //税率列表
|
|
|
+ rateList: [{ name: '1' }, { name: '2' }],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ async search() {
|
|
|
+ console.log('查询');
|
|
|
+ },
|
|
|
+ see() {
|
|
|
+ console.log('查看');
|
|
|
+ this.dialog = true;
|
|
|
+ },
|
|
|
+ addTab(targetName) {
|
|
|
+ this.editableTabs.push({});
|
|
|
+ console.log(targetName);
|
|
|
+ // this.editableTabsValue = targetName;
|
|
|
+ },
|
|
|
+ removeTab(targetName) {
|
|
|
+ const name1 = Number(targetName);
|
|
|
+ if (name1 > -1) {
|
|
|
+ this.editableTabs.splice(name1, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.detail {
|
|
|
+ .top {
|
|
|
+ position: relative;
|
|
|
+ text-align: right;
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ margin: 20px 0px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.rate {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .rateMoney {
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ padding: 6px 0px;
|
|
|
+ height: 34px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ font-size: 13px;
|
|
|
+ background-color: #fdf6ec;
|
|
|
+ padding: 8px 0px;
|
|
|
+ text-align: center;
|
|
|
+ color: #e6a23c;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-button--small,
|
|
|
+.el-button--small.is-round {
|
|
|
+ color: #409eff;
|
|
|
+ background: #ecf5ff;
|
|
|
+ border-color: #b3d8ff;
|
|
|
+}
|
|
|
+/deep/.el-form--inline .el-form-item__content {
|
|
|
+ width: 185px;
|
|
|
+}
|
|
|
+</style>
|
