cost-frontend/src/views/convolution/costCalculation/index.vue

<script lang="tsx">
//表格
import { defineComponent, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import Calculate from "./component/calculate.vue";
import { transformPageResponse } from "@/utils/qomo";
import { costStandardList, deleteCostStandard } from "@/api/costCalculation";
import { costStandardVersionAdd } from "@/api/costCalculation";
import { modelList } from "@/api/modelManagement";
export default defineComponent({
  setup() {
    const tableRef = ref();
    const visible = ref(false);
    const forecastDialogRef = ref();
    const forecastDialogRefNum = ref();
    const formData = ref({
      drawingNo: "",
      stage: "",
      createTime: "",
      costVersion: "",
      materialNo: "",
      year: "",
      flowDefinitionId: ""
    });
    const rileForm = ref();
    const modelSelect = ref([]);
    //列
    const columns = ref([
      { type: "selection" },
      { label: "版本号", prop: "costVersion" },
      { label: "年份", prop: "year", valueType: "year" },
      { label: "物料编号", prop: "materialNo" },
      {
        label: "创建日期",
        prop: "createTime",
        hideInSearchForm: true,
        valueType: "datetime"
      },
      {
        label: "阶段",
        prop: "stage",
        valueType: "dict-select",
        extraProps: { dictType: "stageData" }
      },
      {
        label: "状态",
        prop: "status",
        valueType: "dict-select",
        extraProps: { dictType: "statusList" }
      },
      {
        type: "operation",
        label: "操作",
        minWidth: 200,
        render: ({ row, doAddOrEdit, doDeleteRows, doReload, doPreview }) => (
          <base-table-operation
            btnList={[
              {
                key: "edit",
                label: "重新计算",
                onclick: () => doAddOrEdit(row)
              },
              {
                key: "delete",
                label: "删除",
                onclick: () => doDeleteRows(row)
              },
              {
                key: "deletion",
                label: "部件缺失信息"
              },
              {
                key: "preview",
                label: "查看详情",
                onclick: () => doPreview(row)
              }
            ]}
          />
        )
      }
    ]);

    const render = () => {
      return (
        <div>
          <BasePageContainer
            flex-hidden={true}
            style={{ width: "100%", height: "800px", padding: "0" }}
          >
            <BaseTable
              columns={columns.value}
              queryParamsToUrl
              toolbar={{
                layout: "search-dnamic,reload,column-setting,fullscreen"
              }}
              ref={tableRef}
              request={async ({
                pageSize = 10,
                current = 1,
                ...otherSearchParams
              }) => {
                let tableData = {};
                tableData = transformPageResponse(
                  await costStandardList({
                    pageNo: current,
                    pageSize,
                    ...otherSearchParams
                  })
                );
                tableData.data.forEach(item => {
                  if (item.stage == "A") {
                    item.stage = "初始";
                  } else if (item.stage == "B") {
                    item.stage = "量产";
                  } else if (item.stage == "C") {
                    item.stage = "首批";
                  }
                });
                return tableData;
              }}
              curdConfig={{
                unitColSpan: 12,
                async onDeleteRows(data) {
                  await deleteCostStandard({ id: data.id });
                }
              }}
              v-slots={{
                toolbar: () => (
                  <el-space>
                    <el-button type="primary" onClick={calculate}>
                      计算标准成本
                    </el-button>
                    <el-button type="success" onClick={batchCalculate}>
                      批量计算
                    </el-button>
                    <el-button type="info" onClick={batchExport}>
                      批量导出
                    </el-button>
                  </el-space>
                )
              }}
            />
          </BasePageContainer>
          <base-dialog-form
            ref={forecastDialogRefNum}
            v-model={visible.value}
            title={"生成设置版本号"}
            width={400}
            labelWidth={0}
            confirm={() => {
              const year = formData.value.createTime.split("-")[0];
              formData.value.year = year;
              costStandardVersionAdd(formData.value).then(res => {
                tableRef.value.doReload();
              });
            }}
            cancel={() => {
              
            }}
          >
            <el-form
              ref={rileForm}
              v-model={formData.value}
              label-width="100px"
            >
              <el-form-item label="图号" prop="drawingNo">
                <el-input
                  v-model={formData.value.drawingNo}
                  onChange={splicing}
                />
              </el-form-item>
              <el-form-item label="物料号" prop="materialNo">
                <el-input v-model={formData.value.materialNo} />
              </el-form-item>
              <el-form-item label="项目阶段" prop="stage">
                <el-select
                  v-model={formData.value.stage}
                  placeholder="请选择项目阶段"
                  onChange={splicing}
                >
                  <el-option label="初始" value="A"></el-option>
                  <el-option label="量产" value="B"></el-option>
                  <el-option label="首批" value="C"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择模型" prop="stage">
                <el-select
                  v-model={formData.value.flowDefinitionId}
                  placeholder="请选择项目阶段"
                  onChange={splicing}
                >
                  {modelSelect.value.map(item => (
                    <ElOption
                      key={item.value}
                      label={item.label}
                      value={item.value}
                    />
                  ))}
                </el-select>
              </el-form-item>
              <el-form-item label="创建日期" prop="createTime">
                <el-date-picker
                  v-model={formData.value.createTime}
                  type="datetime"
                  disabledDate={time => {
                    return time.getTime() > Date.now();
                  }}
                  value-format="YYYY-MM-DD HH:MM:ss"
                  onChange={splicing}
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="生成版本号" prop="costVersion">
                <el-input
                  type="textarea"
                  disabled
                  rows="2"
                  v-model={formData.value.costVersion}
                />
              </el-form-item>
            </el-form>
          </base-dialog-form>
          {/* <Calculate
            visible={visible.value}
            onCancelVisible={cancelVisible}
            tableRef={tableRef.value}
          ></Calculate> */}
          <base-dialog-form
            ref={forecastDialogRef}
            title={"批量计算"}
            width={400}
            labelWidth={0}
            rules={{
              filed: [
                { required: true, message: "请上传附件", trigger: "blur" }
              ]
            }}
            confirm={() => {
              {
                /* forecastDialogRef.value.open(); */
              }
            }}
            cancel={() => {
              forecastDialogRef.value.close();
            }}
            v-slots={{
              default: ({ model }) => (
                <el-form-item label="" prop="filed">
                  <base-upload
                    drag
                    multiple
                    limit={1}
                    on-change={onChange}
                    v-model={model.fileIds}
                    accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                  >
                    <el-icon class="el-icon-upload">
                      <upload-filled />
                    </el-icon>
                    <div class="w-full">请上传文件</div>
                  </base-upload>
                </el-form-item>
              )
            }}
          />
        </div>
      );
    };
    const calculate = () => {
      visible.value = true;
    };
    const cancelVisible = () => {
      visible.value = false;
    };
    const batchCalculate = () => {
      forecastDialogRef.value.open();
    };
    const batchExport = () => {
      console.log(tableRef.value.selectionRows, "批量导出");
    };
    const onChange = file => {
      console.log(file, "PPPPPPPPPPPPPPPPPPPP");

      const isExcel =
        file.raw.type === "application/vnd.ms-excel" ||
        file.raw.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isExcel) {
        ElMessage.error("只能上传Excel文件!");
        return false;
      }
      return true;
    };
    const splicing = () => {
      formData.value.costVersion = "";
      formData.value.costVersion =
        formData.value.drawingNo +
        "_" +
        formData.value.stage +
        "_" +
        formData.value.createTime;
    };
    watch(visible, (newVal, oldVal) => {
      if (newVal) {
        formData.value = {
          drawingNo: "",
          stage: "",
          createTime: "",
          costVersion: "",
          materialNo: "",
          year: "",
          flowDefinitionId: ""
        };
        modelList({ pageNo: 1, pageSize: 999, projectId: 49 }).then(res => {
          modelSelect.value = res.records.map(item => {
            return {
              value: item.id,
              label: item.name
            };
          });
          console.log(modelSelect.value, "PPPPPPPPPPPPPPPPPPPPP");
        });
      }
    });
    const doReload = () => {};
    return render;
  }
});
</script>
<style lang="scss" scoped></style>