drp-ui/src/views/purchase/purchase-order/index.vue

<!-- 采购订单修订—— 列表 -->
<script>
import { TableColumns, SearchColumns, TabColumns, SelectColumns } from "./column";
import orderApi from "@/api/business/purchase/purchase-order";
import {
  initPage,
  initParams,
  initColumns,
  initDicts,
} from "@/utils/init";


export default {
  name: "PuchaseOrder",
  dicts: initDicts(SelectColumns),
  components: {
    AddDrawer: () => import('./add/index.vue'),
    SeeDrawer: () => import('./see/index.vue'),
    EditDrawer: () => import('./edit/index.vue'),
  },
  data() {
    const initTabColumns = () => TabColumns;
    return {
      loading: false,
      isSimpleSearch: true,
      pageSizes: [10, 20, 50, 100],
      page: initPage(),
      searchColumns: SearchColumns,
      params: initParams(SearchColumns),

      tableColumns: TableColumns,
      tableData: [],
      tabColumns: initTabColumns(),
      tabName: "puOrderItemList",
      tabTableDatas: {
        puOrderItemList: [],
        puOrderExecuteList: [],
      },
      checkedList: [],
    };
  },
  computed: {
    showSearchColumns() {
      return this.isSimpleSearch
        ? this.searchColumns.slice(0, 4)
        : this.searchColumns;
    },
  },
  created() {
    this.fetchList(this.params, this.page);
    console.log("Vue", this);
  },
  methods: {
    async fetchList(params, page) {
      try {
        this.loading = true;
        // const { pageNum, pageSize } = page;
        const { code, msg, rows, total } = await orderApi.list(params, page);
        if (code === 200) {
          this.page.total = total;
          this.tableData = rows;
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    handleSearchChange() {
      this.isSimpleSearch = !this.isSimpleSearch;
      // this.$notify.info({
      //   title: this.isSimpleSearch ? "Simple Search" : "All Search",
      // });
    },

    // 刷新操作
    handleRefreshList() {
      this.fetchList(this.params, this.page);
    },
    // 查询操作
    handleQueryList() {
      this.fetchList(this.params, this.page);
    },
    // 重置操作
    handleResetList() {

      this.page = initPage();
      this.params = initParams(SearchColumns);
      this.fetchList(this.params, this.page);
    },
    handleTabClick() { },
    // 新增
    handleOpenAddDrawer(copyVal) {
      const { setVisible, setCopyParams } = this.$refs.addDrawerFef;
      setVisible(true);

      copyVal.id && copyVal.id != '' && setCopyParams(copyVal.id);
    },
    // 复制
    handleCopy() {

      // let rowDetails = {
      //   ... this.checkedList[0],
      //   id: '',
      //   code: '',
      //   status: '0',
      //   source: '3',
      // };
      this.handleOpenAddDrawer(this.checkedList[0]);
    },
    // 查看
    async handleOpenSeeDrawer(row) {
      const { id } = row;
      const { setVisible, fetchItem } = this.$refs.seeDrawerFef;
      await setVisible(true);
      await fetchItem(id);
    },
    // 编辑、修订
    async handleOpenEditDrawer(row) {
      const { id } = row;
      const { setVisible, fetchItem } = this.$refs.editDrawerFef;
      await setVisible(true);
      await fetchItem(id);
    },
    // 获取子表信息
    async handleDetailsData(row) {
      try {
        const { code, msg, data } = await orderApi.details(row.id);
        if (code === 200) {
          // 物料信息:puOrderItemList   执行结果:puOrderExecuteList
          for (const key in this.tabTableDatas) {
            this.tabTableDatas[key] = data[key];
          }
        }
      } catch (err) {
        //
      } finally {
        // this.loading = false;
      }
    },
    // 删除操作
    async handleDeleteList(row) {
      try {
        this.loading = true;
        const { id } = row;
        console.log(id, 'id');
        const { code, msg } = await orderApi.remove(id);
        if (code === 200) {
          this.fetchList(this.params, this.page);
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }
    },
    // 提交
    async handleSubmit(row) {
      try {

        let { code } = await orderApi.submit({ puOrderId: row.id });

        if (code == 200) {

          this.fetchList(this.params, this.page);

        }

      } catch (error) {

      } finally {
      }
    },
    // 判断“退回”按钮
    judgeIsAllSendBack() {
      if (this.checkedList.length == 1) {

        // 非手工、状态非审批通过  
        if (this.checkedList[0].source != 3 && (this.checkedList[0].status == 0 || this.checkedList[0].status == 3)) {

          return false
        }
      }
      return true;
    },
    //  整单退回
    handleAllSendBack() {
      let data = {
        id: this.checkedList[0].id,
        documentIds: [],
        baskCause: ''
      }
      console.log(data);
      try {
        this.loading = true;
        let { code, msg } = orderApi.documentsReturn(data);

      } catch (error) {

      } finally {
        this.loading = false;
      }
    },
    // 判断是否满足整单关闭
    judgeIsAllClose() {

      if (this.checkedList.length == 1) {

        if (this.checkedList[0].status == 0) {
          // 未审批状态下整单关闭

          return false
        }
      }
      return true;

    },
    // 整单关闭
    async handleAllClose() {
      // 未审批状态下整单关闭
      try {

        this.loading = true;

        let puOrderIds = this.checkedList.map(order => {

          return order.id;

        })

        let { code } = await orderApi.close({ puOrderIds });

        if (code === 200) {

          this.fetchList(this.params, this.page);

        }

      } catch (error) {

      } finally {
        this.loading = false;
      }
    },
    handleSelect(selection, row) {

      this.checkedList = selection;

      console.log(this.checkedList, 'this.checkedList');

    },
  },
};
</script>

<template>
  <el-card 
    v-loading="loading" 
    style="width: calc(100% - 24px); height: 100%; margin: 10px" 
    :body-style="{ padding: 0 }"
  >
    <SeeDrawer ref="seeDrawerFef"></SeeDrawer>
    <AddDrawer ref="addDrawerFef" @close="handleRefreshList"></AddDrawer>
    <EditDrawer ref="editDrawerFef" @close="handleRefreshList"></EditDrawer>

    <el-form 
      size="mini" 
      label-position="right" 
      label-width="100px" 
      :model="params" 
      style="padding: 20px 0 0 0"
    >
      <el-row :gutter="24" style="display:flex; flex-wrap: wrap;">
        <el-col :span="20">
          <el-row :gutter="20">
            <el-col 
              v-for="column in showSearchColumns" 
              :key="column.title" 
              :xl="6" :lg="6" :md="8" :sm="12" :xs="24"
            >
              <el-form-item :prop="column.key" :label="column.title">
                <el-input v-model="params[column.key]" :placeholder="column.placeholder"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" style="text-align: right; padding-right: 40px">
          <el-button type="primary" size="mini" @click="handleQueryList"
            v-hasPermi="['material:order:query']">搜索</el-button>
          <el-button size="mini" @click="handleResetList">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- <el-divider>
      <i :class="isSimpleSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" style="cursor: pointer"
        @click="handleSearchChange"></i>
    </el-divider> -->

    <!-- 操作 -->
    <el-row :gutter="24" style="padding: 0 20px">
      <!-- <el-col :span="6">123</el-col> -->
      <el-col :span="24" style="text-align: right;margin: 0 10px 0 0">

        <!-- <el-button-group style="margin-left: 10px"> -->
        <el-button size="mini" type="primary" plain @click="handleOpenAddDrawer"
          v-hasPermi="['material:order:add']">新增</el-button>
        <!-- </el-button-group> -->

        <el-button-group style="margin-left: 10px">
          <el-button size="mini" :disabled="checkedList.length != 1" @click="handleCopy">复制</el-button>
        </el-button-group>

        <el-button-group style="margin-left: 10px" :key="checkedList.length + 1">
          <el-button size="mini" @click="handleAllSendBack" :disabled="judgeIsAllSendBack()">整单退回</el-button>
          <el-button size="mini" @click="handleAllClose" :disabled="judgeIsAllClose()">整单关闭</el-button>
        </el-button-group>

        <el-button-group style="margin-left: 10px">
          <!-- <el-button size="mini">采购退货</el-button> -->

          <!-- <el-button size="mini">附件管理</el-button>
          <el-button size="mini">单据追溯</el-button> -->
        </el-button-group>
      </el-col>
    </el-row>

    <el-table 
      @row-dblclick="handleOpenSeeDrawer" 
      @row-click="handleDetailsData" 
      :data="tableData" 
      size="mini"
      highlight-current-row
      @select="handleSelect"
      height="450"
      style="width: 100%; margin: 20px 0 0 0"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column 
        v-for="(column, index) in tableColumns" 
        :key="index" 
        :prop="column.key" 
        :label="column.title"
        :width="column.width || 180" 
        :show-overflow-tooltip="column.showOverflowTooltip || true"
      >

        <template slot-scope="scope">
          <dict-tag v-if="column.referName" 
            size="small" 
            :value="scope.row[column.key]"
            :options="dict.type[column.referName]"
           />

          <el-checkbox v-else-if="column.inputType === 'Checkbox'"
            v-model="scope.row[column.key]" 
            disabled 
            true-label="Y"
            false-label="N"
          > </el-checkbox>
          <span v-else>{{ scope.row[column.key] }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <!-- <el-button @click.stop="handleOpenSeeDrawer(scope.row)" type="text" size="small">查看</el-button> -->
          <el-button type="text" size="small" @click.stop="handleOpenEditDrawer(scope.row)"
            v-hasPermi="['material:order:edit']">
            {{ scope.row.status == '2' ? '修订' : '编辑' }}</el-button>
          <!-- 0=自由态，1=审批中，2=已审核，3=已驳回 4=提交中-->
          <el-button 
            v-if="(scope.row.status == '0' || scope.row.status == '3') && scope.row.source == '3'" 
            type="text" 
            size="small" 
            @click.stop="handleDeleteList(scope.row)"
            v-hasPermi="['material:order:remove']"
          >删除</el-button>
          <el-button 
            v-if="scope.row.status == '0' || scope.row.status == '3'" 
            type="text" 
            size="mini"
            v-hasPermi="['material:order:toOa']" 
            @click.stop="handleSubmit(scope.row)"
          >提交</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="page.total>0"
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchList(params, page)"
    />

    <el-tabs v-model="tabName" @tab-click="handleTabClick" style="width: 100%;padding: 20px 10px">
      <el-tab-pane 
        v-for="(column, index) in tabColumns" 
        :key="index" 
        :label="column.title" 
        :name="column.key"
      >
        <el-table :data="tabTableDatas[column.key]" style="width: 100%" highlight-current-row
          :height="tabTableDatas[column.key].length ? 300 : 100">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column 
            v-for="(cColumn, cIndex)  in column.tableColumns" 
            :key="cIndex" 
            :prop="cColumn.key"
            :label="cColumn.title" 
            :width="cColumn.width || 180"
            :show-overflow-tooltip="cColumn.showOverflowTooltip || true"
          >
            <template slot-scope="scope">
              <dict-tag v-if="cColumn.referName" 
                size="small" 
                :value="scope.row[cColumn.key]"
                :options="dict.type[cColumn.referName]"
               />
              <el-checkbox v-else-if="cColumn.inputType === 'Checkbox'" 
                v-model="scope.row[cColumn.key]"
                disabled
                true-label="Y" 
                false-label="N"
              ></el-checkbox>
              <span v-else>{{ scope.row[cColumn.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </el-card>
</template>