cms-zhwl/src/views/order/out.vue

<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">
                <el-col :span="24" class="btn">
                  <el-button size="small" @click="addTab(index)">
                    + 添加支出
                  </el-button>
                </el-col>
                <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(index) {
      this.editableTabs.push({});
      console.log(index);
      // 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>