erp_ehsd/src/views/EHSD/procurement/profitBudgetEHSD/index.vue

<template>
  <div class="tenant">
    <byTable :hideTable="true" :hidePagination="true" :source="sourceList.data" :pagination="sourceList.pagination" :config="config"
             :statConfig="statConfig" :selectConfig="selectConfig" highlight-current-row :onMoreSearch="true" @moreSearch="clickMoreSearch"
             :action-list="[
        {
          text: '默认汇率',
          action: () => openModal(),
        },
      ]" @get-list="getList">
    </byTable>
    <div style="padding: 0 20px 0px 20px; background-color: white" v-if="rateStatus">
      <el-table :data="sourceList.data" v-loading="loading" :height="tableHeight">
        <el-table-column label="合同编号" prop="code" width="140" fixed />
        <el-table-column label="合同金额" width="140" fixed>
          <template #default="{ row }">
            <div>{{ row.currency }} {{ moneyFormat( row.amount,2) }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否已结清" width="120" fixed>
          <template #default="{ row }">
            <div> {{ dictValueLabel(row.isSettled, isSettled) }}</div>
          </template>
        </el-table-column> -->
        <el-table-column label="是否已结清" width="100" fixed>
          <template #default="{ row }">
            <div>
              <span style="padding: 4px" :class="[row.isSettled == 1 ? 'active' : '']">
                {{
                proxy.dictValueLabel(row.isSettled, isSettled)
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收入总计（CNY）" prop="incomeAmount" width="100" fixed>
          <template #default="{ row }">
            <div> {{ moneyFormat(row.incomeAmount ,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="支出总计（CNY）" prop="expenditureAmount" width="100" fixed>
          <template #default="{ row }">
            <div> {{ moneyFormat(row.expenditureAmount,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="毛利" prop="gross" width="130" fixed>
          <template #default="{ row,$index }">
            <div style="display:flex">
              <el-popover placement="top-start" :width="600" trigger="hover" @show="showEcharts(row,$index)">
                <template #default>
                  <div>
                    <div :ref="row.contractId+$index" style="height:320px">
                    </div>
                  </div>
                </template>
                <template #reference>
                  <div style="margin-right:8px;cursor:pointer;position:relative;top:-3px">
                    <img src="@/assets/images/tubiao-zhexiantu.png" alt="" class="pic">
                  </div>
                </template>
              </el-popover>

              <div>{{ moneyFormat(row.gross ,2)}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="毛利率" width="80" fixed>
          <template #default="{ row }">
            <div>{{ parseFloat(row.grossRate).toFixed(2) }}%</div>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" prop="customerName" min-width="200" />
        <el-table-column label="业务员" prop="userName" width="120" />

        <el-table-column label="应付货款" width="120">
          <template #default="{ row }">
            <div>
              <span v-if="row.otherSumAmount">{{moneyFormat( row.otherSumAmount,2) }}</span>
              <span v-else>{{ moneyFormat(row.ehsdSumAmount,2) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="税率" width="120">
          <template #default="{ row }">
            <div>13%</div>
          </template>
        </el-table-column>
        <el-table-column label="应退税金额" prop="refundableAmount" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.refundableAmount ,2)}}</div>
          </template>
        </el-table-column>
        <el-table-column label="包材金额" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.peritectoidAmount,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="配件金额" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.accessoriesAmount,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="拖车费" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.trailerFee,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="报关费" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.customsFee,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="代理费" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.agencyFee,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="港杂费" width="120">
          <template #default="{ row }">
            <div>{{moneyFormat( row.portMixedFee,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="验货红包" width="120">
          <template #default="{ row }">
            <div>
              {{ moneyFormat(row.inspectionRedPack ,2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="佣金" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.commission,2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="其他" width="120">
          <template #default="{ row }">
            <div>{{ moneyFormat(row.other ,2)}}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="110" fixed="right">
          <template #default="{ row }">
            <div>
              <el-button type="primary" @click="changeExchangeRate(row)" link>汇率</el-button>
              <el-button type="primary" @click="changeBudget(row)" link>预算</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="padding: 20px" justify="end" type="flex">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="sourceList.pagination.pageNum"
                       :page-size="sourceList.pagination.pageSize" :total="sourceList.pagination.total" @size-change="handleSizeChange"
                       @current-change="handlePageChange" />
      </el-row>
    </div>

    <el-dialog title="默认汇率" v-if="dialogVisible" v-model="dialogVisible" width="600">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
        <template #currencyList>
          <el-table :data="formData.data.list" style="width: 100%" v-loading="loadingDialog">
            <el-table-column label="币种">
              <template #default="{ row }">
                <div>{{ dictValueLabel(row.type, accountCurrency) }}</div>
              </template>
            </el-table-column>
            <el-table-column label="兑 CHY 汇率">
              <template #default="{ row, $index }">
                <el-form-item :prop="'list.' + $index + '.rate'" :rules="rules.rate" :inline-message="true">
                  <el-input-number onmousewheel="return false;" v-model="row.rate" placeholder="请输入兑 CHY 汇率" style="width: 100%" :precision="6"
                                   :controls="false" :min="0" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="large">确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog title="调整汇率" v-if="openChange" v-model="openChange" width="600">
      <byForm :formConfig="formChangeConfig" :formOption="formOption" v-model="formChangeData.data" :rules="rules" ref="change">
        <template #currencyList>
          <el-table :data="formChangeData.data.list" style="width: 100%" v-loading="loadingDialog">
            <el-table-column label="币种">
              <template #default="{ row }">
                <div>{{ dictValueLabel(row.type, accountCurrency) }}</div>
              </template>
            </el-table-column>
            <el-table-column label="兑 CHY 汇率">
              <template #default="{ row, $index }">
                <el-form-item :prop="'list.' + $index + '.rate'" :rules="rules.rate" :inline-message="true">
                  <el-input-number onmousewheel="return false;" v-model="row.rate" placeholder="请输入兑 CHY 汇率" style="width: 100%" :precision="6"
                                   :controls="false" :min="0" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="openChange = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitChangeForm()" size="large">确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog title="预算" v-if="openBudget" v-model="openBudget" width="400">
      <byForm :formConfig="formBudgetConfig" :formOption="formOption" v-model="formBudgetData.data" ref="budget">
        <template #budgetMoney>
          <div style="width: 100%">
            <el-form-item label="拖车费" prop="trailerFee">
              <el-input v-model="formBudgetData.data.trailerFee" placeholder="请输入拖车费" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.trailerFeeCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="报关费" prop="customsFee" style="margin-top: 20px">
              <el-input v-model="formBudgetData.data.customsFee" placeholder="请输入报关费" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.customsFeeCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="代理费" prop="agencyFee" style="margin-top: 20px">
              <el-input v-model="formBudgetData.data.agencyFee" placeholder="请输入代理费" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.agencyFeeCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="港杂费" prop="portMixedFee" style="margin-top: 20px">
              <el-input v-model="formBudgetData.data.portMixedFee" placeholder="请输入港杂费" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.portMixedFeeCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="验货红包" prop="inspectionRedPack" style="margin-top: 20px">
              <el-input v-model="formBudgetData.data.inspectionRedPack" placeholder="请输入验货红包" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.inspectionRedPackCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="佣金" prop="commission" style="margin-top: 20px">
              <el-input v-model="formBudgetData.data.commission" placeholder="请输入佣金" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.commissionCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="其他" prop="other" style="margin-top: 20px">
              <el-input v-model="formBudgetData.data.other" placeholder="请输入其他" class="input-with-select">
                <template #prepend>
                  <el-select v-model="formBudgetData.data.otherCurrency" placeholder="请选择货币" style="width: 115px" disabled>
                    <el-option v-for="(item, index) in accountCurrency" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="openBudget = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitBudgetForm()" size="large">确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog :title="'高级检索'" v-model="moreSearchDialog" width="500px" destroy-on-close>
      <byForm :formConfig="formSearchConfig" :formOption="formOption" v-model="sourceList.pagination">
      </byForm>
      <template #footer>
        <el-button @click="moreSearchReset" size="large">重置</el-button>
        <el-button @click="moreSearchQuery" type="primary" size="large">搜索</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";

const tableHeight = ref(0);
const getTableHeight = () => {
  if (window.innerHeight >= 920) {
    tableHeight.value = 650;
  } else {
    tableHeight.value = 550;
  }
};
getTableHeight();
window.addEventListener("resize", () => {
  getTableHeight();
});

const { proxy } = getCurrentInstance();
const accountCurrency = ref([]);
const userList = ref([]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    userId: "",
    userName: "",
    contractCode: "",
    customerName: "",
    beginTime: "",
    endTime: "",
  },
});
const loading = ref(false);
const isSettled = ref([
  {
    label: "已结清",
    value: "1",
  },
  {
    label: "未结清",
    value: "0",
  },
]);
const selectConfig = computed(() => {
  return [
    {
      label: "业务员",
      prop: "userId",
      data: userList.value,
    },
    {
      label: "是否已结清",
      prop: "isSettled",
      data: isSettled.value,
    },
  ];
});
const config = computed(() => {
  return [];
});
const headerData = ref({});
const statConfig = computed(() => [
  {
    label: "统计",
    data: [
      //一个卡牌多数据配置
      {
        label: "订单统计（CNY）",
        type: 2,
        data: [
          {
            label: "销售总金额",
            num: proxy.moneyFormat(headerData.value.contractSumAmount, 2),
            color: "#C280FF",
          },
          {
            label: "采购总金额",
            num: proxy.moneyFormat(headerData.value.purchaseSumAmount, 2),
            color: "#C280FF",
          },
        ],
      },
      {
        label: "收入统计（CNY）",
        type: 3,
        data: [
          {
            label: "应退税",
            num: proxy.moneyFormat(headerData.value.taxReturnMoneySumAmount, 2),
            color: "#FF9315",
          },
        ],
      },
      {
        label: "支出统计（CNY）",
        type: 5,
        data: [
          {
            label: "包材金额",
            num: proxy.moneyFormat(headerData.value.peritectoidSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "配件金额",
            num: proxy.moneyFormat(headerData.value.accessoriesSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "拖车费",
            num: proxy.moneyFormat(headerData.value.trailerFeeSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "报关费",
            num: proxy.moneyFormat(headerData.value.customsFeeSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "代理费",
            num: proxy.moneyFormat(headerData.value.agencyFeeSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "港杂费",
            num: proxy.moneyFormat(headerData.value.portMixedFeeSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "验货红包",
            num: proxy.moneyFormat(
              headerData.value.inspectionRedPackSumAmount,
              2
            ),
            color: "#FF6F67",
          },
          {
            label: "佣金",
            num: proxy.moneyFormat(headerData.value.commissionSumAmount, 2),
            color: "#FF6F67",
          },
          {
            label: "其他",
            num: proxy.moneyFormat(headerData.value.otherSumAmount, 2),
            color: "#FF6F67",
          },
        ],
      },
      {
        label: "收支统计（CNY）",
        type: 1,
        data: [
          {
            label: "总收入",
            num: proxy.moneyFormat(headerData.value.totalIncomeSumAmount, 2),
            color: "#0084ff",
          },
          {
            label: "总支出",
            num: proxy.moneyFormat(headerData.value.totalExpensesSumAmount, 2),
            color: "#0084ff",
          },
          {
            label: "总毛利",
            num: proxy.moneyFormat(headerData.value.grossProfitSum, 2),
            color: "#0084ff",
          },
          {
            label: "毛利率",
            num: headerData.value.grossProfitMargin + " %",
            color: "#0084ff",
          },
        ],
      },
    ],
  },
]);
const getDict = () => {
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "account_currency",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        accountCurrency.value = res.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
        judgeRate();
      } else {
        ElMessage("请先添加货币");
      }
    });
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
    });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/contract/getProfitBudgetPage", sourceList.value.pagination)
    .then((res) => {
      sourceList.value.data = res.rows;
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
  proxy
    .post("/contract/getProfitBudgetHeadStatistic", sourceList.value.pagination)
    .then((res) => {
      headerData.value = res;
    });
};
const rateStatus = ref(false);
const judgeRate = () => {
  proxy.post("/currencyRate/list", {}).then(
    (res) => {
      if (res && res.length > 0) {
        for (let i = 0; i < accountCurrency.value.length; i++) {
          let currencyStatus = true;
          for (let j = 0; j < res.length; j++) {
            if (accountCurrency.value[i].value === res[j].type) {
              currencyStatus = false;
              break;
            }
          }
          if (currencyStatus) {
            return ElMessage("请先完成默认汇率的配置");
          }
        }
        rateStatus.value = true;
        getList();
      } else {
        ElMessage("请先完成默认汇率的配置");
      }
    },
    (err) => {
      console.log(err);
      ElMessage("请先完成默认汇率的配置");
    }
  );
};
getDict();
const handleSizeChange = (val) => {
  sourceList.value.pagination.pageNum = 1;
  sourceList.value.pagination.pageSize = val;
  getList();
};
const handlePageChange = (val) => {
  sourceList.value.pagination.pageNum = val;
  getList();
};
const dialogVisible = ref(false);
const loadingDialog = ref(false);
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formData = reactive({
  data: {
    list: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "slot",
      prop: "currencyList",
      slotName: "currencyList",
      label: "",
    },
  ];
});
const rules = ref({
  rate: [{ required: true, message: "请输入兑 CHY 汇率", trigger: "blur" }],
});
const openModal = () => {
  if (accountCurrency.value && accountCurrency.value.length > 0) {
    formData.data = {
      list: accountCurrency.value.map((item) => {
        return {
          id: "",
          type: item.value,
          rate: 1,
        };
      }),
    };
  } else {
    formData.data = {
      list: [],
    };
  }
  loadingDialog.value = true;
  dialogVisible.value = true;
  proxy.post("/currencyRate/list", {}).then(
    (res) => {
      if (res && res.length > 0 && formData.data.list.length > 0) {
        formData.data.list = formData.data.list.map((item) => {
          for (let i = 0; i < res.length; i++) {
            if (item.type === res[i].type) {
              item.id = res[i].id;
              item.rate = res[i].rate;
              break;
            }
          }
          return {
            ...item,
          };
        });
      }
      loadingDialog.value = false;
    },
    (err) => {
      console.log(err);
      loadingDialog.value = false;
    }
  );
};
const submitForm = () => {
  submit.value.handleSubmit(() => {
    loadingDialog.value = true;
    proxy.post("/currencyRate/edit", formData.data.list).then(
      () => {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        dialogVisible.value = false;
        rateStatus.value = true;
        getList();
      },
      (err) => {
        console.log(err);
        loadingDialog.value = false;
      }
    );
  });
};
const openChange = ref(false);
const change = ref(null);
const formChangeData = reactive({
  data: {
    list: [],
  },
});
const formChangeConfig = computed(() => {
  return [
    {
      type: "slot",
      prop: "currencyList",
      slotName: "currencyList",
      label: "",
    },
  ];
});
const changeExchangeRate = (row) => {
  formChangeData.data = {
    id: row.contractId,
    list: [],
  };
  if (accountCurrency.value && accountCurrency.value.length > 0) {
    formChangeData.data.list = accountCurrency.value.map((item) => {
      return {
        type: item.value,
        rate: 1,
      };
    });
  }
  loadingDialog.value = true;
  openChange.value = true;
  if (row.currencyRateJson) {
    let currencyRateJson = JSON.parse(row.currencyRateJson);
    formChangeData.data.list = formChangeData.data.list.map((item) => {
      for (let i = 0; i < currencyRateJson.length; i++) {
        if (item.type === currencyRateJson[i].type) {
          item.rate = currencyRateJson[i].rate;
          break;
        }
      }
      return {
        ...item,
      };
    });
    loadingDialog.value = false;
  } else {
    proxy.post("/currencyRate/list", {}).then(
      (res) => {
        if (res && res.length > 0 && formChangeData.data.list.length > 0) {
          formChangeData.data.list = formChangeData.data.list.map((item) => {
            for (let i = 0; i < res.length; i++) {
              if (item.type === res[i].type) {
                item.rate = res[i].rate;
                break;
              }
            }
            return {
              ...item,
            };
          });
        }
        loadingDialog.value = false;
      },
      (err) => {
        console.log(err);
        loadingDialog.value = false;
      }
    );
  }
};
const submitChangeForm = () => {
  change.value.handleSubmit(() => {
    loadingDialog.value = true;
    let data = {};
    data.id = formChangeData.data.id;
    data.currencyRateJson = JSON.stringify(formChangeData.data.list);
    proxy.post("/contract/edit", data).then(
      () => {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        openChange.value = false;
        getList();
      },
      (err) => {
        console.log(err);
        loadingDialog.value = false;
      }
    );
  });
};
const openBudget = ref(false);
const budget = ref(null);
const formBudgetData = reactive({
  data: {},
});
const formBudgetConfig = computed(() => {
  return [
    {
      type: "title",
      title: "合同信息",
      label: "",
    },
    {
      type: "input",
      prop: "code",
      label: "合同编号",
      itemType: "text",
      disabled: true,
    },
    {
      type: "input",
      prop: "customerName",
      label: "客户名称",
      itemType: "text",
      disabled: true,
    },
    {
      type: "input",
      prop: "userName",
      label: "业务员",
      itemType: "text",
      disabled: true,
    },
    {
      type: "title",
      title: "预算金额",
      label: "",
    },
    {
      type: "slot",
      slotName: "budgetMoney",
      label: "",
    },
  ];
});
const changeBudget = (row) => {
  let currency = "CNY";
  if (accountCurrency.value && accountCurrency.value.length > 0) {
    currency = accountCurrency.value[0].value;
  }
  formBudgetData.data = {
    contractId: row.contractId,
    code: row.code,
    customerName: row.customerName,
    userName: row.userName,
    trailerFeeCurrency: currency,
    trailerFee: row.trailerFee,
    customsFeeCurrency: currency,
    customsFee: row.customsFee,
    agencyFeeCurrency: currency,
    agencyFee: row.agencyFee,
    portMixedFeeCurrency: currency,
    portMixedFee: row.portMixedFee,
    inspectionRedPackCurrency: currency,
    inspectionRedPack: row.inspectionRedPack,
    commissionCurrency: currency,
    commission: row.commission,
    otherCurrency: currency,
    other: row.other,
  };
  openBudget.value = true;
};
const submitBudgetForm = () => {
  proxy.post("/contractBudget/budget", formBudgetData.data).then(() => {
    ElMessage({
      message: "保存成功",
      type: "success",
    });
    openBudget.value = false;
    getList();
  });
};

const formSearchConfig = computed(() => {
  return [
    {
      type: "input",
      label: "业务员",
      prop: "userName",
      itemWidth: 100,
    },
    {
      type: "input",
      label: "合同编号",
      prop: "contractCode",
      itemWidth: 100,
    },
    {
      type: "input",
      label: "客户名称",
      prop: "customerName",
      itemWidth: 100,
    },
    {
      type: "date",
      itemType: "datetime",
      label: "合同时间",
      prop: "beginTime",
      placeholder: "合同开始时间",
      itemWidth: 50,
      clearable: true,
    },
    {
      type: "date",
      itemType: "datetime",
      label: " ",
      prop: "endTime",
      placeholder: "合同结束时间",
      itemWidth: 50,
      clearable: true,
    },
  ];
});
const moreSearchDialog = ref(false);
const clickMoreSearch = () => {
  moreSearchDialog.value = true;
};
const moreSearchQuery = () => {
  moreSearchDialog.value = false;
  getList();
};
const moreSearchReset = () => {
  sourceList.value.pagination = {
    total: 0,
    pageNum: sourceList.value.pagination.pageNum,
    pageSize: sourceList.value.pagination.pageSize,
    keyword: "",
    userId: "",
    userName: "",
    contractCode: "",
    customerName: "",
    beginTime: "",
    endTime: "",
  };
  moreSearchQuery();
};

const optionTwo = reactive({
  data: {
    tooltip: {
      trigger: "axis",
    },
    // legend: {
    //   data: ["价格"],
    // },
    grid: {
      left: "3%",
      right: "6%",
      top: "10%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      // 格式化函数
      // valueFormatter: (val) => {
      //   return val + "aaa";
      // },
      formatter: (params, ticket, callback) => {
        return `
        ${params[0].axisValue}
        <br/> 
        ${params[0].seriesName}：${params[0].data} 
        <br/> 销售合同金额：${
          showRowData.value.grossProfitInfoList[params[0].dataIndex + 1]
            .contractAmount
        }
        <br/> 采购合同金额：${
          showRowData.value.grossProfitInfoList[params[0].dataIndex + 1]
            .purchaseAmount
        }`;
      },
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {},
    //   },
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "毛利",
        type: "line",
        data: [],
      },
    ],
  },
});
const showRowData = ref({});
const showEcharts = (row, index) => {
  showRowData.value = row;
  let myChart = null;
  myChart = echarts.init(proxy.$refs[row.contractId + index]);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
  if (row.grossProfitInfoList && row.grossProfitInfoList.length > 1) {
    // 删除数组第一个元素
    // const arr = proxy.deepClone(row.grossProfitInfoList);
    // arr.shift();
    let arr = row.grossProfitInfoList.slice(1, row.grossProfitInfoList.length);
    optionTwo.data.xAxis.data = arr.map((item) => {
      return item.createTime.slice(0, 10);
    });
    optionTwo.data.series[0].data = arr.map((item) => {
      return item.gross;
    });
  } else {
    optionTwo.data.xAxis.data = [];
    optionTwo.data.series[0].data = [];
  }
  myChart.setOption(optionTwo.data);
  myChart.resize();
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
.active {
  background: #a6dd82;
  color: #fff;
  border-radius: 4px;
}
.pic {
  object-fit: contain;
  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: middle;
}
</style>