Win.Sfs.SmartSettlementSystem.PG/vue/src/views/ux/billManage/sparePart/index.vue

<!--大众备件结算核对-->
<template>
  <div class="cr-body-content">
    <!--功能栏-->
    <!-- 搜索 -->
    <div style="float: left">
      <flexbox class="content-header">
        <JobSelectVerson
          :options="JobVersionList"
          style="width: 150px; margin-left: -10px"
          class="search-container"
          @value-change="JobVersionValue"
        ></JobSelectVerson>
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="handleCreate"
          >统计
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete()"
          >删除(支持批量)</el-button
        >
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-check"
          size="mini"
          @click="handleConfirm()"
          >已确认(支持批量)</el-button
        >
        <el-button
          class="filter-item"
          type="warning"
          icon="el-icon-edit"
          size="mini"
          v-loading="formLoading"
          @click="handleCreateBills()"
          >生成出库单(支持批量)</el-button
        >
      </flexbox>
    </div>
    <!-- 刷新 -->
    <div style="float: right">
      <flexbox class="content-header">
        <el-tooltip
          class="item"
          effect="dark"
          content="手动刷新"
          placement="top"
        >
          <el-button
            size="mini"
            circle
            icon="el-icon-refresh"
            @click="refresh()"
          />
        </el-tooltip>

        <span style="margin-left: 10px; color: #ff5640; float: right"
          >说明：每间隔3分钟进行自动刷新！</span
        >
      </flexbox>
    </div>

    <!--主页面表格渲染-->
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      class="cr-table"
      :data="list"
      :height="tableHeight"
      :cell-style="cellStyle"
      size="small"
      stripe
      border
      highlight-current-row
      style="width: 100%"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
      @filter-change="filterChange"
    >
      <el-table-column type="selection" width="44px"></el-table-column>
      <el-table-column
        v-for="(item, index) in getDefaultField"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :formatter="fieldFormatter"
        sortable
        show-overflow-tooltip
        :gutter="0"
      >
        <template slot="header" slot-scope="scope">
          {{ scope.column.label }}
        </template>
      </el-table-column>

      <!-- 操作名称 -->
      <el-table-column
        prop="actionName"
        label="操作名称(单击箭头过滤)"
        width="165"
        column-key="actionName"
        :filters="[
          { text: '导出', value: '导出' },
          { text: '消息', value: '消息' },
        ]"
        filter-placement="bottom-end"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <div align="center">
            <el-tag
              v-for="(item, index) in menuCateMap"
              v-show="scope.row.actionName == item.value"
              :key="index"
              :type="item.cssName"
            >
              {{ item.label }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column
        prop="stateName"
        label="状态(单击箭头过滤)"
        width="165"
        column-key="stateName"
        align="center"
        :filters="[
          { text: '执行完成(任务成功)', value: 'Succeeded' },
          { text: '执行完成(任务失败)', value: 'Failed' },
          { text: '执行中', value: 'Processing' },
          { text: '等待执行', value: 'Scheduled' },
        ]"
        filter-placement="bottom-end"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <el-tag
            v-for="(item, index) in stateNameCateMap"
            v-show="scope.row.stateName == item.value"
            :key="index"
            :type="item.cssName"
          >
            {{ item.label }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <div align="center">
            <!-- <el-button
              v-if="scope.row.actionName == '导出'"
              size="mini"
              type="text"
              @click="handleDownload(scope.row)"
              icon="el-icon-edit"
              >下载</el-button
            > -->
            <el-button
              v-if="
                scope.row.actionName == '导出' &&
                scope.row.stateName == 'Succeeded' &&
                scope.row.downFileName != ''
              "
              size="mini"
              type="text"
              @click="handleDownload(scope.row)"
              icon="el-icon-edit"
              >下载</el-button
            >
            <el-button
              v-if="
                scope.row.actionName == '导出' &&
                scope.row.error != '' &&
                scope.row.stateName == 'Succeeded'
              "
              size="mini"
              type="text"
              @click="handleDownload(scope.row)"
              icon="el-icon-edit"
              >检验失败，下载</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
    <div class="table-footer">
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        :page.sync="page"
        :limit.sync="listQuery.MaxResultCount"
        @pagination="getList"
      />
    </div>

    <!-- 任务日志详细 -->
    <el-dialog
      title="任务详细"
      :visible.sync="openView"
      width="700px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="24">
            <div class="overall">
              <!-- 步骤条 -->
              <div class="steps-box">
                <ul class="steps">
                  <li
                    v-for="(item, index) in stepList"
                    :key="index"
                    :class="{ active: activeIndex - 1 === index }"
                  >
                    <p :class="{ li_active: activeIndex > index }">
                      <i :class="item.icon"></i>
                    </p>
                    <div
                      class="text"
                      :class="{ li_active: activeIndex > index }"
                    >
                      {{ item.title }}
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 步骤条对应内容 -->
              <div class="Article-content">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="基本信息" name="first">
                    <div class="dialog-body">
                      <div
                        class="content"
                        v-for="(item, index) in stepList"
                        :key="index"
                        v-show="activeIndex == index + 1"
                      >
                        <div>
                          <el-card style="height: 300px; margin: 2px">
                            <div
                              v-if="activeIndex == 1"
                              slot="header"
                              class="clearfix"
                            >
                              <span>当前状态：等待执行</span>
                            </div>
                            <div
                              v-else-if="activeIndex == 2"
                              slot="header"
                              class="clearfix"
                            >
                              <span>当前状态：执行中...</span>
                            </div>
                            <div
                              v-else-if="activeIndex == 3"
                              slot="header"
                              class="clearfix"
                            >
                              <div id="chatarea">
                                <div
                                  style="display: inline; color: #71d87f"
                                  v-if="form.stateName == 'Succeeded'"
                                >
                                  执行结果：执行成功
                                </div>
                                <div
                                  style="display: inline; color: #ff5640"
                                  v-else-if="form.stateName == 'Failed'"
                                >
                                  执行结果：执行失败
                                </div>
                              </div>
                            </div>
                            <div>
                              <el-col :span="12">
                                <el-form-item label="模块名称：">{{
                                  form.name
                                }}</el-form-item>
                                <el-form-item label="操作名称：">{{
                                  form.actionName
                                }}</el-form-item>
                              </el-col>
                              <el-col :span="12">
                                <el-form-item label="创建人：">{{
                                  form.creator
                                }}</el-form-item>
                                <el-form-item label="创建时间：">
                                  <el-date-picker
                                    value-format="yyyy-MM-dd hh:mm:ss"
                                    format="yyyy-MM-dd hh:mm:ss"
                                    v-model="form.createdAt"
                                    type="date"
                                    class="picker"
                                    disabled
                                  ></el-date-picker>
                                </el-form-item>
                              </el-col>
                              <el-col :span="24">
                                <el-form-item
                                  label="异常信息："
                                  style="color: #ff5640"
                                  v-if="form.stateName == 'Failed'"
                                >
                                  <el-button
                                    class="result-info__btn--err"
                                    type="text"
                                    @click="downloadErrData(form.error)"
                                    >下载错误数据</el-button
                                  >
                                </el-form-item>
                                <el-form-item
                                  label="生成数据："
                                  style="color: #ff5640"
                                  v-else-if="
                                    form.stateName == 'Succeeded' &&
                                    form.actionName == '导出'
                                  "
                                >
                                  <el-button
                                    class="result-info__btn--err"
                                    type="text"
                                    @click="downloadErrData(form.downFileName)"
                                    >下载生成数据</el-button
                                  >
                                </el-form-item>
                              </el-col>
                            </div>
                          </el-card>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!--统计功能表单渲染-->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :title="formTitle"
      append-to-body
      width="680px"
    >
      <el-form
        ref="formCount"
        :inline="true"
        :rules="rules"
        :model="formCount"
        size="mini"
      >
        <el-row>
          <el-col :md="4" :xs="24">
            <el-form-item label="选择版本" required />
          </el-col>
          <el-col :md="20" :xs="24" style="margin-left: -80px">
            <el-form-item prop="versionValue">
              <el-select
                v-model="formCount.versionValue"
                size="medium"
                clearable
                style="width: 188px; margin-right: 15px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in versionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="4" :xs="24">
            <el-form-item label="物料组(车型)" />
          </el-col>
          <el-col :md="20" :xs="24" style="margin-left: -80px">
            <el-form-item prop="materialGroupValue">
              <el-select
                v-model="formCount.materialGroupValue"
                size="medium"
                multiple
                filterable
                clearable
                style="width: 380px; margin-right: 15px"
                @change="valueChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in materialGroupList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.value
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :md="4" :xs="24">
            <el-form-item label="CP5时间：" />
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -80px">
            <el-form-item>
              <el-date-picker
                v-model="cp5startTime"
                :picker-options="pickerOptions2"
                type="datetime"
                size="small"
                @change="getdateValueCp5"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -40px">
            <el-form-item>
              <el-date-picker
                v-model="cp5endTime"
                :picker-options="pickerOptions3"
                type="datetime"
                size="small"
                @change="getdateValCp5"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="23:59:59"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="4" :xs="24">
            <el-form-item label="CP7时间：" />
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -80px">
            <el-form-item>
              <el-date-picker
                v-model="startTime"
                type="datetime"
                size="small"
                :picker-options="pickerOptions0"
                @change="getdateValue"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -40px">
            <el-form-item>
              <el-date-picker
                v-model="endTime"
                type="datetime"
                :picker-options="pickerOptions1"
                size="small"
                @change="getdateVal"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="23:59:59"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :md="4" :xs="24">
            <el-form-item label="KEEN号" />
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -80px">
            <el-form-item prop="kennCode">
              <el-input
                type="textarea"
                v-model="formCount.kennCode"
                style="width: 170px"
                :rows="4"
                placeholder="多个KENN号，请以回车换行形式添加！"
              />
            </el-form-item>
          </el-col>
          <el-col :md="4" :xs="24">
            <el-form-item label="底盘号" />
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -95px">
            <el-form-item prop="chassisNumber">
              <el-input
                v-model="formCount.chassisNumber"
                style="width: 170px"
                type="textarea"
                :rows="4"
                placeholder="多个底盘号，请以回车换行形式添加！"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="4" :xs="24">
            <el-form-item label="客户零件号" />
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -80px">
            <el-form-item prop="materialCode">
              <el-input
                v-model="formCount.materialCode"
                style="width: 170px"
                type="textarea"
                :rows="4"
                placeholder="多个客户零件号，请以回车换行形式添加！"
              />
            </el-form-item>
          </el-col>
          <el-col :md="4" :xs="24">
            <el-form-item label="厂内零件号" />
          </el-col>
          <el-col :md="10" :xs="24" style="margin-left: -95px">
            <el-form-item prop="sapCode">
              <el-input
                v-model="formCount.sapCode"
                style="width: 170px"
                type="textarea"
                :rows="4"
                placeholder="多个厂内零件号，请以回车换行形式添加！"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="text" @click="dialogFormVisible = false"
          >取消</el-button
        > -->
        <el-button @click="resetForm('formCount')">重置</el-button>
        <el-button v-loading="formLoading" type="primary" @click="save"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import permission from "@/directive/permission/index.js";
import { downloadFile } from "@/utils/crmindex.js";
import CRMTableHead from "../../components/CRMTableHead";
import moment from "moment";
import JobSelectVerson from "@/components/CreateCom/Job-Select.vue";

export default {
  name: "SparePartReport",
  components: { Pagination, CRMTableHead, JobSelectVerson },
  directives: { permission },

  data() {
    return {
      crmType: "backJob",
      rules: {
        versionValue: [
          { required: true, message: "必须输入！", trigger: "change" },
        ],
      },
      pickerOptionsCp5: {
        disabledDate: (time) => {
          let now = new Date();
          let monthEndDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
          let timeEnd = Date.parse(monthEndDate);
          if (timeEnd) {
            return (
              time.getTime() > time.getTime() > timeEnd - 8.64e7 ||
              time.getTime() > timeEnd + 60 * 60 * 24 * 1000
            ); //能选上最后一天
          }
        },
      },
      pickerOptions0: {
        disabledDate: (time) => {
          //if (this.endTime != "") {
          //return  time.getTime() >= new Date(this.endTime).getTime();
          return time.getTime() > new Date(this.endTime).getTime();
          //}
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          //return time.getTime() <= new Date(this.startTime).getTime() || time.getTime() > Date.now();
          return time.getTime() <= new Date(this.startTime).getTime();
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          //return time.getTime() <= new Date(this.startTime).getTime() || time.getTime() > Date.now();
          return time.getTime() <= new Date(this.startTime).getTime();
        },
      },

      pickerOptions2: {
        disabledDate: (time) => {
          //if (this.endTime != "") {
          return time.getTime() > new Date(this.cp5endTime).getTime();
          //}
        },
      },
      pickerOptions3: {
        disabledDate: (time) => {
          return time.getTime() <= new Date(this.cp5startTime).getTime();
        },
      },
      startTime: "",
      endTime: "",
      pickerOptionsCp7: {
        disabledDate: (time) => {
          let now = new Date();
          let monthEndDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
          let timeEnd = Date.parse(monthEndDate);
          if (timeEnd) {
            return (
              time.getTime() > time.getTime() > timeEnd - 8.64e7 ||
              time.getTime() > timeEnd + 60 * 60 * 24 * 1000
            ); //能选上最后一天
          }
        },
      },
      datetime5: [],
      JobVersionList: [],
      datetime7: [],
      checkedCities: [0],
      selectValue: "",
      selectNameValue: "",
      radio: "0", //结算状态：0未结 1部分结算
      versionList: [],
      materialGroupList: [],
      getmaterialGroupValue: "",
      // 是否显示详细弹出层
      openView: false,
      versionValue: "",
      materialGroupValue: "",
      formTitle: "",
      timer: null, //定时器名称
      //当前位置
      activeIndex: 1,
      //默认显示基本信息
      activeName: "first",
      //步骤条步数
      stepList: [
        {
          title: "等待执行",
          icon: "el-icon-sort",
        },
        {
          title: "执行中",
          icon: "el-icon-refresh",
        },
        {
          title: "执行完成",
          icon: "el-icon-check",
        },
      ],
      customerInfos: "",
      searchContent: "", // 输入内容
      form: {},
      formCount: {
        startTime: "",
        endTime: "",
        cp5startTime: "",
        cp5endTime: "",
        // name: "未结算对比",
        // settledate: "",
        // materialCode: "",
        // sapMaterialCode: "",
        // chassisNumber: "",
        // kennCode: "",
        // version: "",
      },
      cp5startTime: "",
      cp5endTime: "",
      list: null,
      totalCount: 0,
      listLoading: true,
      formLoading: false,
      // 高级搜索
      filterObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      listExportQuery: {
        version: "",
        materialCode: undefined,
        cp7begin: undefined,
        cp7end: undefined,
        kenncode: undefined,
        chassisNumber: undefined,
        materialGroup: undefined,
        begin: undefined,
        end: undefined,
      },
      listQuery: {
        taskId: "",
        name: "",
      },
      page: 1,
      dialogFormVisible: false,
      multipleSelection: [],
      tableHeight: document.documentElement.clientHeight - 260,
      isEdit: false,
      menuCateMap: [
        { label: "导出", value: "导出", cssName: "warning" },
        { label: "消息", value: "消息", cssName: "info" },
      ],
      stateNameCateMap: [
        { label: "执行完成(任务成功)", value: "Succeeded", cssName: "success" },
        { label: "执行中...", value: "Processing", cssName: "primary" },
        { label: "执行完成(任务失败)", value: "Failed", cssName: "danger" },
        { label: "等待执行", value: "Scheduled", cssName: "primary" },
      ],
    };
  },
  mounted() {
    var self = this;
    window.onresize = function () {
      var offsetHei = document.documentElement.clientHeight;
      self.tableHeight = offsetHei - 190;
    };
    this.timer = setInterval(() => {
      this.listQuery.taskId = "";
      this.listQuery.stateName = "";
      setTimeout(this.getList, 0);
    }, 1000 * 180); //30秒刷新一次页面
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
    //this.disabledDateCp5();
  },
  created() {
    this.getAllVersionList();
    this.getMaterialGroup();
    this.getList();
    this.getJobVersionInfo();
    // this.getCurrentMonthFirst();
    // this.getCurrentMonthLast();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  computed: {
    /* 主表头 */
    getDefaultField() {
      var tempsTabs = [];
      tempsTabs.push({
        label: "版本号",
        prop: "type",
        width: 120,
      });
      tempsTabs.push({
        label: "单据流水号",
        prop: "taskId",
        width: 130,
      });
      tempsTabs.push({
        label: "模块名称",
        prop: "name",
        width: 170,
      });
      tempsTabs.push({
        label: "创建人",
        prop: "email",
        width: 110,
      });
      tempsTabs.push({
        label: "创建时间",
        prop: "createdAt",
        width: 150,
      });
      tempsTabs.push({
        label: "说明",
        prop: "remark",
        width: 220,
      });
      tempsTabs.push({
        label: "审批状态",
        prop: "fileName",
        width: 150,
      });
      return tempsTabs;
    },
  },
  methods: {
    //cp5
    getdateValueCp5(val) {
      this.cp5startTime = val;
      this.getbalanceIndexData();
    },
    getdateValCp5(val) {
      this.cp5endTime = val;
      this.getbalanceIndexData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除
    handleDelete(row) {
      this.isEdit = false;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "至少选择一行！",
          type: "warning",
        });
        return;
      } else {
        var getbillNum = "";
        //判断已经生成出库单的不能执行删除操作
        this.multipleSelection.forEach((element) => {
          let state = element.fileName;
          if (state != "" && state != "已确认") {
            this.isEdit = true;
            getbillNum += state + ",";
          }
        });
      }
      if (this.isEdit == true) {
        this.$message({
          message:
            "已经生成出库单的不能删除！单号：" +
            getbillNum.substr(0, getbillNum.length - 1),
          type: "warning",
        });
        return;
      } else {
        var params = [];
        let myalert = ""; //声明变量，其变量必须在此声明后使用
        if (row) {
          //单行
          params.push(row.id);
          myalert = row.name;
        } else {
          //多选
          this.multipleSelection.forEach((element) => {
            let id = element.id;
            params.push(id);
          });
          myalert = "选中项";
        }
        this.$confirm("是否删除" + myalert + "?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .posts("/api/settleaccount/Job/delete", params)
              .then((response) => {
                const index = this.list.indexOf(row);
                this.$notify({
                  title: "成功",
                  message: "删除成功",
                  type: "success",
                  duration: 2000,
                });
                this.getList();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },
    //已确认
    handleConfirm(row) {
      this.isEdit = false;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "至少选择一行！",
          type: "warning",
        });
        return;
      } else {
        var getbillNum = "";
        //判断已经生成出库单的不能再生成出库操作
        this.multipleSelection.forEach((element) => {
          let state = element.fileName;
          if (state != "" && state != "已确认") {
            this.isEdit = true;
            getbillNum += state + ",";
          }
        });
      }
      if (this.isEdit == true) {
        this.$message({
          message:
            "已经生成出库单的不能再确认！单号：" +
            getbillNum.substr(0, getbillNum.length - 1),
          type: "warning",
        });
        return;
      } else {
        var params = [];
        let myalert = ""; //声明变量，其变量必须在此声明后使用
        if (row) {
          //单行
          params.push(row.id);
          myalert = row.name;
        } else {
          //多选
          this.multipleSelection.forEach((element) => {
            let id = element.id;
            params.push(id);
          });
          myalert = "选中项";
        }
        this.$confirm("是否确认" + myalert + "?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .posts(
                "/api/settleaccount/wmsSharePartoutput/WmsSharePartOutPutAudit",
                params
              )
              .then((response) => {
                const index = this.list.indexOf(row);
                this.$notify({
                  title: "成功",
                  message: "操作成功",
                  type: "success",
                  duration: 2000,
                });
                this.getList();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },
    //出库单
    handleCreateBills(row) {
      this.isEdit = false;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "至少选择一行！",
          type: "warning",
        });
        return;
      } else {
        var getbillNum = "";
        //判断已经生成出库单的不能再生成出库操作
        this.multipleSelection.forEach((element) => {
          let state = element.fileName;
          if (state != "" && state != "已确认") {
            this.isEdit = true;
            getbillNum += state + ",";
          }
        });
      }
      if (this.isEdit == true) {
        this.$message({
          message:
            "已经生成出库单的不能再重新生成！单号：" +
            getbillNum.substr(0, getbillNum.length - 1),
          type: "warning",
        });
        return;
      } else {
        var params = [];
        let myalert = ""; //声明变量，其变量必须在此声明后使用
        if (row) {
          //单行
          params.push(row.id);
          myalert = row.name;
        } else {
          //多选
          this.multipleSelection.forEach((element) => {
            let id = element.id;
            params.push(id);
          });
          myalert = "选中项";
        }
        this.listBillQuery.guids = params;
        this.listBillQuery.version = this.JobversionValue;
        console.log("出库单条件：" + JSON.stringify(this.listBillQuery));
        this.$confirm("是否确认出库" + myalert + "?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.formLoading = true;
            this.$axios
              .posts(
                "/api/settleaccount/wmsSharePartoutput/WmsSharePartOutPut",
                this.listBillQuery
              )
              .then((response) => {
                const index = this.list.indexOf(row);
                this.$notify({
                  title: "成功",
                  message: "生成成功",
                  type: "success",
                  duration: 2000,
                });

                this.getList();
                this.formLoading = false;
              })
              .catch(() => {
                this.formLoading = false;
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },
    valueChange(data) {
      this.getmaterialGroupValue = "";
      this.getmaterialGroupValue += data + ",";
      this.getmaterialGroupValue = this.getmaterialGroupValue.substring(
        0,
        this.getmaterialGroupValue.length - 1
      );
    },
    //版本下拉列表选择项
    JobVersionValue(params) {
      //版本下拉选择
      this.JobversionValue = params.value;
      this.getList();
    },
    getJobVersionInfo() {
      //取版本列表信息
      //this.listLoading = true;
      this.listQuery.SkipCount = (this.page - 1) * 1000;
      this.$axios
        .posts("/api/settleaccount/Job/versionlist", this.listQuery)
        .then((response) => {
          this.JobVersionList = [];
          response.forEach((element) => {
            let options = {};
            options.value = element;
            options.label = element;
            this.JobVersionList.push(options);
          });
          if (JSON.stringify(this.JobVersionList) != "[]") {
            //因版本下拉有默认值，所以详表要自动绑定子表数据
            this.JobversionValue = this.JobVersionList[0].value;
            this.JobversionValueVerson = this.JobVersionList[0].label;
            this.getList();
          }
        })
        .catch(() => {
          //this.listLoading = false;
        });
    },
    getdateValue(val) {
      this.startTime = val;
      this.getbalanceIndexData();
    },
    getdateVal(val) {
      this.endTime = val;
      this.getbalanceIndexData();
    },

    getCurrentMonthFirst() {
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      this.startTime = date.getFullYear() + "-" + month + "-" + day;
    },
    getCurrentMonthLast() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var day = new Date(year, month, 0);
      this.endTime = year + "-" + month + "-" + day.getDate();
    },
    handleCheckedCitiesChange(value) {
      alert(value);
    },

    getAllVersionList() {
      this.$axios
        .posts("/api/settleaccount/CentralizedControl/openlist")
        .then((response) => {
          this.versionList = [];
          response.forEach((element) => {
            let options = {};
            options.value = element.version;
            options.label = element.version;
            this.versionList.push(options);
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    getMaterialGroup() {
      this.$axios
        .posts("/api/settleaccount/CodeSetting/list", {
          project: "物料组",
          maxResultCount: 1000,
          skipCount: 0,
          sorting: "value ascending",
        })
        .then((response) => {
          this.materialGroupList = [];
          response.items.forEach((element) => {
            let options = {};
            options.value = element.description;
            options.label = element.value;
            this.materialGroupList.push(options);
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    /* 重置 */
    resetForm(formName) {
      this.formCount = {};
      this.datetime5 = [];
      this.startTime = "";
      this.endTime = "";
      this.cp5startTime = "";
      this.cp5endTime = "";
    },
    save() {
      this.$refs.formCount.validate((valid) => {
        if (valid) {
          this.formLoading = true;
          this.listExportQuery.version = this.formCount.versionValue; //版本
          if (this.formCount.materialCode != "") {
            this.listExportQuery.materialCode = this.formCount.materialCode; //物料号
          }
          if (this.formCount.sapCode != "") {
            this.listExportQuery.sapCode = this.formCount.sapCode; //厂内物料号
          }
          if (this.formCount.kennCode != "") {
            this.listExportQuery.kenncode = this.formCount.kennCode; //KEEN号
          }
          this.listExportQuery.begin = this.cp5startTime
            ? this.cp5startTime
            : undefined;
          this.listExportQuery.end = this.cp5endTime
            ? this.cp5endTime
            : undefined;
          if (this.startTime != "") {
            this.listExportQuery.cp7begin = this.startTime; //CP7开始时间
          }
          if (this.endTime != "") {
            this.listExportQuery.cp7end = this.endTime; //CP5结束日期
          }
          if (this.formCount.chassisNumber != "") {
            this.listExportQuery.chassisNumber = this.formCount.chassisNumber; //底盘号
          }
          if (this.formCount.materialGroupValue != "") {
            this.listExportQuery.materialGroup = this.getmaterialGroupValue; //物料组车型
          }
          console.log(
            "大众备件结算核对-导出条件：" + JSON.stringify(this.listExportQuery)
          );
          this.$axios
            .gets(
              "/api/settleaccount/ReportMakeService/SettleDoorPanel",
              this.listExportQuery
            )
            .then((res) => {
              let taskid = res;
              if (Number.isInteger(taskid)) {
                this.$notify({
                  title: "成功",
                  message: "任务生成成功！任务号:" + taskid,
                  type: "success",
                  duration: 2000,
                });
              }
              this.getList();
              this.formLoading = false;
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.formLoading = false;
              this.dialogFormVisible = false;
            });
        }
      });
    },
    handleCreate() {
      this.$nextTick(() => {
        this.$refs["formCount"].resetFields();
      });
      this.formTitle = "报表统计";
      this.isEdit = false;
      this.form = {};
      this.datetime5 = [];
      this.startTime = "";
      this.endTime = "";
      this.cp5startTime = "";
      this.cp5endTime = "";
      this.dialogFormVisible = true;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    /* 任务详细信息 */
    handleView(row) {
      this.listQuery.taskId = row.taskId;
      this.$axios
        .posts("/api/settleaccount/Job/list", this.listQuery)
        .then((response) => {
          this.form = response[0];
          switch (response[0].stateName) {
            case "Succeeded":
            case "Failed":
              this.activeIndex = 3;
              break;
            case "Processing":
              this.activeIndex = 2;
              break;
            case "Enqueued":
              this.activeIndex = 1;
              break;
          }
          this.openView = true;
        });
    },
    /*  刷新  */
    refresh() {
      this.list = [];
      this.listQuery.taskId = "";
      this.listQuery.name = "";
      this.getList();
    },
    // 监听筛选项的变化
    filterChange(filterObj) {
      console.log(filterObj.actionName);
      if (filterObj.actionName.length > 0) {
        console.log("点击筛选");
      } else {
        console.log("点击重置");
      }
    },
    /* 导出类型的文件 */
    downloadErrData(param) {
      this.listLoading = true;
      let fileNameOfProject = param;
      this.$axios
        .BolbGets(
          "/api/settleaccount/getblobfile/download/" + fileNameOfProject
        )
        .then((response) => {
          if (fileNameOfProject.indexOf("_") != -1) {
            let downName =
              fileNameOfProject.slice(0, fileNameOfProject.lastIndexOf("_")) +
              fileNameOfProject.slice(fileNameOfProject.lastIndexOf("."));
            downloadFile(response, downName);
            this.$notify({
              title: "成功",
              message: "数据-导出中...",
              type: "success",
              duration: 2000,
            });
          } else {
            downloadFile(response, fileNameOfProject);
            this.$notify({
              title: "成功",
              message: "数据-导出中...",
              type: "success",
              duration: 2000,
            });
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.listLoading = false;
        });
    },
    /* 刷新列表 */
    handleHandle(data) {
      if (data.type !== "edit") {
        this.getList();
      }
    },
    /* 格式化字段 */
    fieldFormatter(row, column) {
      if (column.property === "stateName") {
        return {
          Succeeded: "执行完成(成功)",
          Processing: "执行中...",
          Failed: "执行完成(失败)",
          Enqueued: "等待执行",
        }[row[column.property]];
      }
      if (column.property == "createdAt") {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      return row[column.property] || "--";
    },
    handleDownload(row) {
      if (row.stateName == "Succeeded") {
        this.downloadErrData(row.downFileName);
      } else if (row.stateName == "Failed") {
        this.downloadErrData(row.error);
      }
    },
    getList() {
      this.listLoading = true;
      //导入界面中超链接过来的参数
      this.listQuery.name = "备件结算数量差异输出";
      this.$axios
        .posts("/api/settleaccount/Job/list", this.listQuery)
        .then((response) => {
          this.list = response;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // fetchData(id) {
    //   //循环动态，取客户名称
    //   this.$axios
    //     .gets("/api/settleaccount/MaterialRelationship/" + id)
    //     .then((response) => {
    //       this.form = response;
    //     });
    // },
    resetQuery() {},
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      var item = this.list[rowIndex];
      if (column.property === "stateName") {
        if (item.stateName === "Succeeded") {
          return { color: "#71d87f", cursor: "pointer" };
        } else if (item.stateName === "Processing") {
          return { color: "#d87171", cursor: "pointer" };
        } else if (item.stateName === "Failed") {
          return { color: "#ff5640", cursor: "pointer" };
        }
      }
      return { textAlign: "left" };
      //}
    },
    headerRowStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "stateName") {
        return { textAlign: "center" };
      }
      return { textAlign: "center" };
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },
  },
};
</script>


<style lang="scss" scoped>
@import "../../styles/crmtable.scss";
@import "../../styles/steps.scss";

/deep/ .el-checkbox input:focus {
  outline: none !important;
  border-color: gray;
  border: 0px;
  box-shadow: none !important;
}
</style>