element ui 使用案例

<template>
  <el-dialog
    title="采购订单修改/拆单"
    :visible.sync="visible"
    width="1200px"
    :row-class-name="tableRowClassName"
    :close-on-click-modal="false"
    :footer="false"
  >
    <div class="tool-bar">
      <div class="operations">
        <el-button size="mini" @click="handleCancel">取消</el-button>
        <el-button
          :loading="submitting"
          size="mini"
          type="primary"
          @click="handleOk"
        >
          确定
        </el-button>
      </div>
    </div>
    <div v-loading="loading" class="table-wrapper">
      <el-form ref="refTableForm" :model="tableData">
        <el-table
          :data="tableData.dataList"
          max-height="600"
          style="width: 100%"
        >
          <el-table-column prop="code" label="编号"> </el-table-column>
          <el-table-column
            prop="purchaseOrderCode"
            label="商品信息"
          ></el-table-column>
          <el-table-column prop="quotePrice" label="计划单价格">
          </el-table-column>
          <el-table-column prop="unitPrice" label="采购单价"> </el-table-column>
          <el-table-column prop="vendorName" label="供应商编号">
          </el-table-column>
          <el-table-column prop="totalSendNumber" label="计划采购数量">
          </el-table-column>
          <el-table-column prop="sureNumber" label="已确认数量">
          </el-table-column>
          <el-table-column prop="enterStorageNumber" label="已入库数量">
          </el-table-column>
          <el-table-column prop="coverNumber" label="占用订单数量">
          </el-table-column>
          <el-table-column prop="restSureNumber" label="剩余确认数量">
          </el-table-column>
          <el-table-column prop="shouldPayTime" label="应交货日期">
          </el-table-column>
          <el-table-column prop="latestDate" label="最新交期">
            <template slot-scope="scope">
              <el-form-item :rule="[{ required: true, message: '必填项' }]">
                <el-date-picker
                  v-model="scope.row.latestDate"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.isSource" type="text">添加</el-button>
              <el-button v-else type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      quickSettingData: {
        shouldPayTime: "",
      },
      loading: false,
      submitting: false,
      tableData: {
        dataList: [],
      },
    };
  },
  methods: {
    async mock() {
      const data = await new Promise((resolve) => {
        setTimeout(() => {
          const dataList = Array.from({ length: 3 }, (__, index) => ({
            notifyDelieveryCode: `SOC1234567890${index}`,
            quotePrice: "C123456",
            unitPrice: "G123-预付-国内-依法办",
            vendorName: 1000,
            totalSendNumber: 1000,
            sureNumber: "2024-08-31",
            enterStorageNumber: "30%",
            coverNumber: 300,
            restSureNumber: 700,
            shouldPayTime: "2024-08-31",
            latestDate: "2024-08-31",
          }));
          resolve({ dataList });
        }, 2000);
      });

      return data;
    },
    tableRowClassName({ row }) {
      if (row.isSource) {
        return "source-row";
      }
      return "";
    },
    async open({ productCode, purchaseOrderCode }) {
      this.visible = true;
      this.loading = true;
      try {
        const response = await this.mock({ productCode, purchaseOrderCode });
        if (response && Array.isArray(response.dataList)) {
          this.tableData.dataList = response.dataList.map((row) => ({
            ...row,
            isSource: true,
          }));
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: "获取付款信息失败",
        });
      } finally {
        this.loading = false;
      }
    },
    async handleQuickSettings() {
      this.$refs.refQuickSettingForm.validate(() => {
        if (!this.quickSettingData.shouldPayTime) {
          this.$message;
          return;
        }
        this.tableData.dataList = this.tableData.dataList.map((item) => ({
          ...item,
          shouldPayTime: this.quickSettingData.shouldPayTime,
        }));
      });
    },
    handleOk() {
      this.$refs.refQuickSettingForm.validate((valid) => {
        if (!valid) {
          return;
        }
        this.submit(this.tableData.dataList);
      });
    },
    async submit(dataList) {
      this.submitting = true;
      try {
        await this.mock(dataList);

        this.$message({
          message: "已申请",
          type: "success",
        });
        this.visible = false;
      } catch (error) {
        this.$message({
          message: "申请失败",
          type: "error",
        });
      } finally {
        this.submitting = false;
      }
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.tool-bar {
  display: flex;
  justify-content: flex-end;
}
.table-wrapper {
  margin-top: 20px;
}
.red {
  color: red;
}
.source-row {
  background: #f0f9eb;
}
</style>

<template>
  <div id="app">
    <el-button @click.stop="openApplyPayTimeDialog">申请预付款/尾款</el-button>
    <el-button @click.stop="openModifyOrSplitOrderDialog">
      采购订单修改/拆单
    </el-button>
    <!-- 申请预付款/尾款 -->
    <apply-pay-time-dialog ref="refApplyPayTimeDialog"></apply-pay-time-dialog>
    <!-- 采购订单修改/拆单 -->
    <modify-or-split-order-dialog
      ref="refModifyOrSplitOrderDialog"
    ></modify-or-split-order-dialog>
  </div>
</template>

<script>
import ApplyPayTimeDialog from "./components/apply-pay-time-dialog.vue";
import ModifyOrSplitOrderDialog from "./components/modify-or-split-order.vue";

export default {
  name: "app",
  components: {
    ApplyPayTimeDialog,
    ModifyOrSplitOrderDialog,
  },
  data() {
    return {};
  },
  methods: {
    openApplyPayTimeDialog() {
      this.$refs.refApplyPayTimeDialog.open({
        isHk: false,
        productCode: "",
        purchaseOrderCode: "",
      });
    },
    openModifyOrSplitOrderDialog() {
      this.$refs.refModifyOrSplitOrderDialog.open({
        isHk: false,
        productCode: "",
        purchaseOrderCode: "",
      });
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <el-dialog
    title="申请商品货款/尾款"
    :visible.sync="visible"
    width="1200px"
    :close-on-click-modal="false"
    :footer="false"
  >
    <div class="tool-bar">
      <div class="settings">
        <el-form
          ref="refQuickSettingForm"
          :inline="true"
          :model="quickSettingData"
        >
          <el-form-item>
            <el-date-picker
              v-model="quickSettingData.shouldPayTime"
              size="mini"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleQuickSettings">
              快捷应用
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="operations">
        <el-button size="mini" @click="handleCancel">取消</el-button>
        <el-button
          :loading="submitting"
          size="mini"
          type="primary"
          @click="handleOk"
        >
          确定
        </el-button>
      </div>
    </div>
    <div v-loading="loading" class="table-wrapper">
      <el-form ref="refTableForm" :model="tableData">
        <div>
          <span>勾选应付款总额：</span>
          <span class="red">{{ tableData.totalMoney }}</span>
        </div>
        <el-table
          :data="tableData.dataList"
          max-height="600"
          style="width: 100%"
        >
          <!-- todo 采购订单编号样式 -->
          <el-table-column prop="purchaseOrderCode" label="采购订单编号">
          </el-table-column>
          <el-table-column
            prop="productCode"
            label="商品编号"
          ></el-table-column>
          <!-- todo 供应商样式 -->
          <el-table-column prop="vendorName" label="供应商"> </el-table-column>
          <el-table-column prop="purchaseNumber" label="数量">
          </el-table-column>
          <el-table-column prop="productTotalMoney" label="商品总额">
          </el-table-column>
          <el-table-column prop="alreadyShouldPayTime" label="预计应付款日期">
          </el-table-column>
          <el-table-column prop="prepayRate" label="预付比例">
          </el-table-column>
          <el-table-column prop="alreadyPayMoney" label="已付金额">
          </el-table-column>
          <el-table-column prop="totalNeedPayMoney" label="应付款">
          </el-table-column>
          <el-table-column prop="shouldPayTime" label="应付款日期">
            <template slot-scope="scope">
              <el-form-item :rule="[{ required: true, message: '必填项' }]">
                <el-date-picker
                  v-model="scope.row.shouldPayTime"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      quickSettingData: {
        shouldPayTime: "",
      },
      loading: false,
      submitting: false,
      tableData: {
        currencySymbol: "",
        totalMoney: 0,
        dataList: [],
      },
    };
  },
  methods: {
    async mock() {
      const data = await new Promise((resolve) => {
        setTimeout(() => {
          const dataList = Array.from({ length: 10 }, (__, index) => ({
            purchaseOrderCode: `SOC1234567890${index}`,
            productCode: "C123456",
            vendorName: "G123-预付-国内-依法办",
            purchaseNumber: 1000,
            productTotalMoney: 1000,
            alreadyShouldPayTime: "2024-08-31",
            prepayRate: "30%",
            alreadyPayMoney: 300,
            totalNeedPayMoney: 700,
            shouldPayTime: "2024-08-31",
          }));
          resolve({ dataList });
        }, 2000);
      });

      return data;
    },
    async open({ isHk, productCode, purchaseOrderCode }) {
      this.visible = true;
      this.loading = true;
      try {
        const response = await this.mock({ productCode, purchaseOrderCode });
        if (response && Array.isArray(response.dataList)) {
          this.tableData.dataList = response.dataList;
          this.tableData.currencySymbol = isHk ? "HK$" : "¥";
          this.tableData.totalMoney = response.dataList.reduce((pre, cur) => {
            return pre + cur.totalNeedPayMoney;
          }, 0);
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: "获取付款信息失败",
        });
      } finally {
        this.loading = false;
      }
    },
    async handleQuickSettings() {
      this.$refs.refQuickSettingForm.validate(() => {
        if (!this.quickSettingData.shouldPayTime) {
          this.$message;
          return;
        }
        this.tableData.dataList = this.tableData.dataList.map((item) => ({
          ...item,
          shouldPayTime: this.quickSettingData.shouldPayTime,
        }));
      });
    },
    handleOk() {
      this.$refs.refQuickSettingForm.validate((valid) => {
        if (!valid) {
          return;
        }
        this.submit(this.tableData.dataList);
      });
    },
    async submit(dataList) {
      this.submitting = true;
      try {
        await this.mock(dataList);

        this.$message({
          message: "已申请",
          type: "success",
        });
        this.visible = false;
      } catch (error) {
        this.$message({
          message: "申请失败",
          type: "error",
        });
      } finally {
        this.submitting = false;
      }
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.tool-bar {
  display: flex;
  justify-content: space-between;
}
.table-wrapper {
  margin-top: 20px;
}
.red {
  color: red;
}
</style>