lanan-system-vue/src/views/repair/tickets/form/GetAndBackWares.vue

<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="关键字" prop="soNo">
        <el-input style="width: 20rem" type="text" placeholder="工单号、车牌号、联系电话" v-model="queryParams.soNo"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="序号" align="center" width="80">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单号" align="center" prop="soNo"/>
      <el-table-column label="数量" align="center" prop="itemCount"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini"
                     icon="el-icon-view"
                     @click="showItem(scope.row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />
    <el-dialog :title="type ? '领料确认' : '退料确认'" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-table v-loading="dialogLoading" :data="items" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column label="序号" align="center" width="80">
          <template scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="repairWares.name" />
<!--        <el-table-column label="商品编码" align="center" prop="repairWares.code" />-->
<!--        <el-table-column label="规格" align="center" prop="repairWares.model" />-->
        <el-table-column label="数量" align="center" prop="goodsCount" />
      </el-table>
      <el-form style="margin-top: 1rem" :inline="true">
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="图片" prop="image">
              <ImageUpload v-model="image" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleConfirm">
          确认
        </el-button>
        <el-button type="info" size="small" @click="handleVoid">
          作废
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRepairSoPage, voidSo, confirmGet, confirmBack} from "@/api/repair/stockOperate/stockOperate";
import {getUserProfile} from "@/api/system/user";
import {getRepairSoiBySoId} from "@/api/repair/stockOperate/stockOperateItem";

export default {
  name: "GetAndBackWares",
  props: {
    type: Boolean,
  },
  data(){
    return{
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        soType: this.type ? "02" : "04",
        soStatus: this.type ? "04" : "07",
        soNo: null,
      },
      showSearch: true,
      loading: false,
      list: [],
      total: 0,
      userId: null,
      dialogVisible: false,
      items: [],
      dialogLoading: false,
      formData:{},
      image: null
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    async getList(){
      try {
        this.loading = true
        if (!this.userId){
          const res = await getUserProfile()
          this.userId = res.data.id
        }
        this.queryParams['userId'] = this.userId
        const res = await getRepairSoPage(this.queryParams)
        this.list = res.data.records
        this.total = res.data.total
      }finally {
        this.loading = false
      }
    },
    handleQuery(){
      this.queryParams.pageNo = 1
      this.getList()
    },
    resetQuery(){
      this.resetForm('queryForm')
      this.handleQuery()
    },
    async showItem(row){
      this.formData['id'] = row.id
      try{
        this.items = []
        this.image = null
        this.dialogVisible = true
        this.dialogLoading = true
        const res = await getRepairSoiBySoId(row.id)
        this.items = res.data
      }finally {
        this.dialogLoading = false
      }
    },
    async handleConfirm(){
      if (this.image){
        const data = this.image.split(",")
        this.image = data.map(item => {
          return item.replace(process.env.VUE_APP_FILE_API, "")
        }).join(",")
      }
      if (this.type){
        try {
          await confirmGet(this.formData.id, this.image)
          this.dialogVisible = false
          this.$modal.msgSuccess("操作成功")
          await this.getList()
        }catch{}
      }else {
        await confirmBack(this.formData.id, this.image)
        this.dialogVisible = false
        this.$modal.msgSuccess("操作成功")
        await this.getList()
      }
    },
    // 作废
    async handleVoid(){
      try {
        await this.$modal.confirm("确认作废该单据？")
        this.formData['soStatus'] = '06'
        await voidSo(this.formData)
        this.dialogVisible = false
        this.$modal.msgSuccess("操作成功")
        await this.getList()
      }catch {}
    }
  }
}
</script>

<style scoped lang="scss">

</style>