cost-frontend/src/views/costMining/index.vue

<script lang="tsx">
//表格
import { defineComponent, ref } from "vue";
import { ElMessage } from "element-plus";
import { transformPageResponse } from "@/utils/qomo";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const tableRef = ref();
    const forecastDialogRef = ref();
    const selectionRows = ref([]);
    const btnTitle = ref("工时差异"); 
    // const uploadUrl = ref("/c7525cost/importExcel");
    //列
    const columnsCheck = ref([
      { prop: "type", label: "对比项", hideInSearchForm: true },
      {
        label: "实际",
        prop: "costCenterCode",
        hideInSearchForm: true
      },
      { label: "标准", prop: "factory", hideInSearchForm: true },
      { label: "差值", prop: "factory", hideInSearchForm: true },
      {
        type: "operation",
        label: "挖掘分析",
        minWidth: 120,
        render: ({ row }) => (
          <base-table-operation
            btnList={[
              {
                key: "check",
                label:"查看明细",
                onclick: () => timeVariance(row)
              }
            ]}
          />
        )
      }
    ]);
    const columns = ref([
      { type: "selection" },
      { prop: "year", label: "工厂号" },
      { label: "物料号", prop: "costCenterCode" },
      { label: "成本阶段", prop: "factory" },
      { prop: "laborHourRate", label: "版本号", hideInSearchForm: true },
      { prop: "equipHourRate", label: "工单年月",hideInAddOrEditForm: true},
      {
        prop: "fuelHourRate",
        label: "实际总成本",
        hideInSearchForm: true,
        hideInAddOrEditForm: true
      },
      {
        prop: "auxiliaryHourRate",
        label: "标准总成本",
        hideInSearchForm: true,
        hideInAddOrEditForm: true
      },
      { prop: "otherHourRate", label: "总差额", hideInSearchForm: true,hideInAddOrEditForm: true },
      { prop: "effectiveDate", label: "差额比", hideInSearchForm: true,hideInAddOrEditForm: true },
      {
        valueType: "date",
        prop: "expirationDate",
        label: "创建时间",
        hideInSearchForm: true,
        hideInAddOrEditForm: true
      },
      {
        type: "operation",
        label: "报告状态",
        minWidth: 120,
        render: ({ row, doAddOrEdit, doDeleteRows, doPreview }) => (
          <base-table-operation
            btnList={[
              {
                key: "check",
                label: "查看报告",
                onclick: () => checkReport(row)
              }
            ]}
          />
        )
      }
    ]);

    const render = () => {
      return (
        <div>
          <BaseTable
            columns={columns.value}
            ref={tableRef}
            selectionRows={selectionRows.value}
            toolbar={{
              layout: "search-dnamic,reload,column-setting,fullscreen"
            }}
            request={async ({
              pageSize = 10,
              current = 1,
              ...otherSearchParams
            }) => {
              await new Promise(resolve =>
                setTimeout(resolve, Math.random() * 1111)
              );
              return {
                data: Array(pageSize)
                  .fill(0)
                  .map((item, index) => ({
                    id: Math.random(),
                    name: "Tom" + current,
                    date123: "date123" + current,
                    createTime: new Date().getTime(),
                    districtName: "区划" + index,
                    districtName1: "区划1" + index
                  })),
                current,
                // pages: 500 / pageSize,
                total: 500
              };
            }}
            curdConfig={{
              /**
               * 接受自动表单的数据
               * @param data
               */
              async onAddOrEdit(data) {},

              unitColSpan: 24
            }}
            v-slots={{
              toolbar: ({ doAddOrEdit, doDeleteRows }) => (
                <el-space>
                  <el-button type="primary" onClick={doAddOrEdit}>
                    新增挖掘任务
                  </el-button>
                </el-space>
              )
            }}
          />
          <BaseDialog
            title="报告详情"
            width="80%"
            ref={forecastDialogRef}
            confirmButtonProps={false}
          >
            <BaseTable
              columns={columnsCheck.value}
              ref={tableRef}
              selectionRows={selectionRows.value}
              request={async ({ pageSize = 10, current = 1 }) => {
                await new Promise(resolve =>
                  setTimeout(resolve, Math.random() * 1111)
                );
                return {
                  data: Array(pageSize)
                    .fill(0)
                    .map((item, index) => ({
                      id: Math.random(),
                      name: "Tom" + current,
                      date123: "date123" + current,
                      createTime: new Date().getTime(),
                      districtName: "区划" + index,
                      districtName1: "区划1" + index,
                      type: index % 3
                    })),
                  current,
                  total: 500
                };
              }}
              curdConfig={{
                /**
                 * 接受自动表单的数据
                 * @param data
                 */
                async onAddOrEdit(data) {},

                unitColSpan: 24
              }}
            />
          </BaseDialog>
        </div>
      );
    };
    const checkReport = () => {
      forecastDialogRef.value.open();
    };
    const timeVariance = row => {
      if (row.type == 0) {
        // 工时
        router.push({
          path: "/standardComparison/manHour",
        });
      } else if (row.type == 1) {
        // 人工
        router.push({
          path: "/standardComparison/artificial",
        });
      } else if (row.type == 2) {
        // 材料
        router.push({
          path: "/standardComparison/materials",
        });
      }
    };
    return render;
  }
});
</script>
<style lang="scss" scoped></style>