sen-yu-new-web/src/views/reportForms/cost-allocation-add.vue

<template>
  <!-- 成本分配 （保存后数据到单证的成本分配汇总内）-->
  <div id="costAllocationAdd">
    <a-card :bordered="false">
      <!-- 主表信息 点击搜索后 全部回显--->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="form" :model="costAllocationAdd" :rules="validatorRules">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划单号" prop="planNum">
                <!-- <a-input placeholder="请输入计划单号" v-model="costAllocationAdd.planNum"></a-input> -->
                <a-input-search
                  placeholder="请输入计划单号"
                  enter-button
                  v-model="costAllocationAdd.planNum"
                  @search="onSearch"
                />
              </a-form-model-item>
            </a-col>
            <!-- 输入【计划单号】点击搜索后，回显以下所有信息，【备注】需要输入，后进行保存 disabled -->
            <a-col :md="6" :sm="8">
              <a-form-model-item label="产品款号" prop="poStyleNum">
                产品款号AZ2445
                <!-- <a-input v-model="costAllocationAdd.poStyleNum" disabled></a-input> -->
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="外销员" prop="exportSales">
                <a-input v-model="costAllocationAdd.exportSales" ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="成衣合同号" prop="garmentContractNo">
                <a-input v-model="costAllocationAdd.garmentContractNo"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="部门" prop="department">
                <a-input v-model="costAllocationAdd.department"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="客户简称" prop="customerShortName">
                <a-input v-model="costAllocationAdd.customerShortName"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="加工单位" prop="processUnit">
                <a-input v-model="costAllocationAdd.processUnit"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="出运日期" prop="outData">
                <a-date-picker
                  style="width: 100%"
                  :format="dateFormat"
                  v-model="costAllocationAdd.outData"
                ></a-date-picker>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="计划数量" prop="planQuantity">
                <a-input v-model="costAllocationAdd.planQuantity"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="美元外销总价" prop="USDTotalExportPrice">
                <a-input v-model="costAllocationAdd.USDTotalExportPrice"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="人民币费用支出" prop="RMBExpense">
                <a-input
                  v-model="costAllocationAdd.RMBExpense"
                  style="color:#027db4;"
                  @click="mainTableExpenseCNY"
                ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="税率%" prop="taxRate">
                <a-input v-model="costAllocationAdd.taxRate"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="实际出货数量" prop="actualShipQuantity">
                <a-input v-model="costAllocationAdd.actualShipQuantity"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="人民币外销金额" prop="RMBExportAmount">
                <a-input v-model="costAllocationAdd.RMBExportAmount"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="美元费用支出" prop="USDExpense">
                <a-input
                  v-model="costAllocationAdd.USDExpense"
                  style="color:#027db4;"
                  @click="mainTableExpenseUSD"
                ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="加工费" prop="processCost">
                <a-input v-model="costAllocationAdd.processCost"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="短出数" prop="shortSeveral">
                <a-input v-model="costAllocationAdd.shortSeveral"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="短出货值" prop="shortValue">
                <a-input v-model="costAllocationAdd.shortValue"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="短出面料成本" prop="fabricShortCost">
                <a-input v-model="costAllocationAdd.fabricShortCost"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="事故单美金金额" prop="accidentUSDAmount">
                <a-input v-model="costAllocationAdd.accidentUSDAmount"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="面料含税成本" prop="fabricCostIncludesTax">
                <a-input v-model="costAllocationAdd.fabricCostIncludesTax"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="辅料含税成本" prop="excipienCostIncludesTax">
                <a-input v-model="costAllocationAdd.excipienCostIncludesTax"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="销售订单本币总额" prop="salesOrdersLocalTotal">
                <a-input v-model="costAllocationAdd.salesOrdersLocalTotal"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="事故单人民币金额" prop="accidentCNYAmount">
                <a-input v-model="costAllocationAdd.accidentCNYAmount"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="面料不含税成本" prop="fabricCostNotIncludesTax">
                <a-input v-model="costAllocationAdd.fabricCostNotIncludesTax"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="辅料不含税成本" prop="excipienCostNotIncludesTax">
                <a-input v-model="costAllocationAdd.excipienCostNotIncludesTax"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="销售订单原币总额" prop="salesOrdersOriginalTotal">
                <a-input v-model="costAllocationAdd.salesOrdersOriginalTotal"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="制单人" prop="preparedBy">
                <a-input v-model="costAllocationAdd.preparedBy"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <h4 style="color:red;">
                标记
                <span>（计算结果是负值时，该标记是红色）</span>
              </h4>
            </a-col>
          </a-row>
        </a-form-model>
      </div>

      <!--tabs 组件引入  -->
      <tabs />

      <!-- 事故单 -->
      <div style="margin:40px 0">
        <h6 class="table-title">事故单</h6>
        <a-table
          rowKey="id"
          :loading="loading"
          :columns="accidentListColumns"
          :data-source="accidentListData"
          bordered
          :pagination="false"
        >
          <!-- 事故单 -->
          <span slot="accidentNum" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>

      <!-- 费用支出 -->
      <div>
        <h6 class="table-title">费用支出</h6>
        <a-table
          rowKey="id"
          :loading="loading"
          :columns="costPayColumns"
          :data-source="costPayData"
          bordered
          :pagination="false"
        >
        </a-table>
      </div>

      <!-- 备注信息 1 根据角色判断 显示备注 1 或备注 2-->
      <div class="note-one" style="marginTop:40px;">
        <h6 class="table-title">备注信息 1</h6>
        <div class="noteDetail">
          <a-form-model ref="form" :model="costAllocationAdd" :rues="validatorRules">
            <a-form-model-item prop="noteOne">
              <a-input
                type="textarea"
                v-model="costAllocationAdd.noteOne"
                placeholder="请输入备注"
                style="minHeight:100px;"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>

      <!-- 备注信息 2 根据角色判断 显示备注 1 或备注 2-->
      <!-- <div class="note-one" style="marginTop:40px;">
        <h6 class="table-title">备注信息 2</h6>
        <div class="noteDetail">
          <a-form-model ref="form" :model="costAllocationAdd" :rues="validatorRules">
            <a-form-model-item prop="noteOne">
              <a-input
                type="textarea"
                v-model="costAllocationAdd.noteTwo"
                placeholder="请输入备注"
                style="minHeight:100px;"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div> -->

      <!-- 页面底部保存 -->
      <a-row :gutter="24" style="marginTop:40px;float:right">
        <a-col :md="12" :sm="12">
          <a-button type="primary" @click="save">
            保存
          </a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 弹框 -->
    <div>
      <!-- 主表 人民币费用支出  弹框 -->
      <mainTableExpenseCNY-modal ref="mainTableExpenseCNYModal" :father="aa"></mainTableExpenseCNY-modal>
      <!-- 主表 美元费用支出  弹框 -->
      <mainTableExpenseUSD-modal ref="mainTableExpenseUSDModal" :father="bb"></mainTableExpenseUSD-modal>
      <!-- 事故单 -->
      <accidentList-modal ref="accidentListModal" :father="cc"></accidentList-modal>
    </div>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import tabs from '@views/reportForms/cost-allocation-table/tabs.vue' // tabs组件
import mainTableExpenseCNYModal from '@views/reportForms/cost-allocation-table/mainTableExpenseCNYModal.vue'
import mainTableExpenseUSDModal from '@views/reportForms/cost-allocation-table/mainTableExpenseUSDModal.vue'
import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue' // 事故单

export default {
  name: 'CostAllocationAdd', // 成本分配 (新增)
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },

  data() {
    return {
      loading: false, // 表格加载
      costAllocationAdd: {}, // 成本分配统计
      dateFormat: 'YYYY-MM-DD',
      noteOne: '', // 备注 1
      noteTwo: '', // 备注 2

      // 事故单 表头
      accidentListColumns: [
        {
          title: '单号',
          width: 120,
          dataIndex: 'accidentNum',
          className: 'replacecolor',
          customCell: this.accidentListCustomCell,
          scopedSlots: { customRender: 'accidentNum' }
        },
        { title: '事故承担方', width: 120, dataIndex: 'accidentUndertaker', className: 'replacecolor' },
        { title: '金额', dataIndex: 'amount', width: 120, className: 'replacecolor' }
      ],
      accidentListData: [{ accidentNum: '1100011' }, {}],
      // 费用支出 表头
      costPayColumns: [
        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
        { title: '支出单号', width: 120, dataIndex: 'disbursementSlipNo', className: 'replacecolor' },
        { title: '费用项目', dataIndex: 'expenseItem', width: 120, className: 'replacecolor' },
        { title: ' 支出本币金额', dataIndex: 'disbursedLocalMoney', width: 120, className: 'replacecolor' },
        { title: '支出原币金额', dataIndex: 'disbursedOriginalMoney', width: 120, className: 'replacecolor' },
        { title: '发票号', dataIndex: 'invoiceNum', width: 120, className: 'replacecolor' },
        { title: '制单人', dataIndex: 'preparedBy', width: 120, className: 'replacecolor' }
      ],
      costPayData: [{}],
      visible: true, // 成本分配  新增

      validatorRules: {
        planNum: [{ required: true, message: '请输入计划单号进行搜索', trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    // 【计划单号】 搜索
    onSearch(value) {
      console.log('【计划单号】 ', value)
      // 根据计划单号查询该页面所有信息且回显
    },
    //  主表：人民币费用支出  弹框
    mainTableExpenseCNY() {
      console.log('点击:主表人民币费用支出')
      this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYModVis = true
    },
    // 主表：美元费用支出  弹框
    mainTableExpenseUSD() {
      console.log('点击:主表美元费用支出')
      this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDModVis = true
    },

    // 事故单 单号 弹框
    accidentListCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('this:', this)
            // 调用【面料损耗表】中的【事故单】弹框
            this.$refs.accidentListModal.accidentListModVis = true
          }
        }
      }
    },

    // --------------------------------------
    // 页面 保存
    save() {
      console.log('保存该计划单号的备注、数据保存到单证【成本分配汇总】，覆盖该计划单号之前的信息')
      const that = this
      this.$refs.form.validate(valid => {
        if (valid) {
          //  alert('保存!')
          console.log('备注信息:', this.costAllocationAdd.noteOne, '计划单号:', this.costAllocationAdd.planNum)
          // that.$message.success(res.message)
          that.$message.success('保存成功，数据添加到成本分配汇总')
        } else {
          this.$message.info('请选择计划单号、输入备注信息')
        }
      })
    },
    // father 方法
    aa() {},
    bb() {},
    cc() {}
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }

// 抽屉里的card样式
// /deep/ .ant-drawer-content {
//   background-color: #f0f2f5;
// }
// /deep/ .ant-drawer-body {
//   padding: 10px;
// }
</style>