wuye / webui

<template>
  <div class="allocation-storehouse-apply-container">
    <el-card class="box-card">
      <div slot="header" class="flex justify-between">
        <span>{{ $t('allocationStorehouseApply.title') }}</span>
        <el-button type="primary" size="small" class="float-right" @click="goBack">
          <i class="el-icon-close"></i>
          {{ $t('allocationStorehouseApply.back') }}
        </el-button>
      </div>

      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="$t('allocationStorehouseApply.warehouse')">
              <el-select v-model="form.shId" :placeholder="$t('allocationStorehouseApply.warehousePlaceholder')"
                @change="computeFlow" style="width:100%">
                <el-option v-for="item in storehouses" :key="item.shId" :label="item.shName" :value="item.shId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item :label="$t('allocationStorehouseApply.remark')">
              <el-input type="textarea" v-model="form.remark"
                :placeholder="$t('allocationStorehouseApply.remarkPlaceholder')" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card margin-top">
      <div slot="header" class="flex justify-between">
        <span>{{ $t('allocationStorehouseApply.itemsTitle') }}</span>
        <el-button type="primary" size="small" class="float-right" @click="openChooseResourceDialog">
          <i class="el-icon-search"></i>
          {{ $t('allocationStorehouseApply.selectItems') }}
        </el-button>
      </div>

      <el-table :data="resourceStores" border style="width: 100%">
        <el-table-column prop="type" :label="$t('allocationStorehouseApply.itemType')" align="center">
          <template slot-scope="scope">
            {{ scope.row.parentRstName || '-' }} > {{ scope.row.rstName || '-' }}
          </template>
        </el-table-column>

        <el-table-column prop="name" :label="$t('allocationStorehouseApply.itemName')" align="center">
          <template slot-scope="scope">
            {{ scope.row.resName }}({{ scope.row.resCode }})
          </template>
        </el-table-column>

        <el-table-column prop="spec" :label="$t('allocationStorehouseApply.itemSpec')" align="center">
          <template slot-scope="scope">
            {{ scope.row.rssName || '-' }}
          </template>
        </el-table-column>

        <el-table-column prop="isFixed" :label="$t('allocationStorehouseApply.fixedItem')" align="center">
          <template slot-scope="scope">
            {{ scope.row.isFixedName }}
          </template>
        </el-table-column>

        <el-table-column prop="sourceWarehouse" :label="$t('allocationStorehouseApply.sourceWarehouse')" align="center">
          <template slot-scope="scope">
            {{ scope.row.shaName }}
          </template>
        </el-table-column>

        <el-table-column prop="price" :label="$t('allocationStorehouseApply.referencePrice')" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.timesId" @change="changeTimesId($event, scope.$index)" style="width:100%">
              <el-option :value="''" :label="$t('allocationStorehouseApply.selectPrice')"></el-option>
              <el-option v-for="time in scope.row.times" :key="time.timesId" :label="time.price"
                :value="time.timesId"></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="stock" :label="$t('allocationStorehouseApply.stock')" align="center">
          <template slot-scope="scope">
            {{ getTimesStock(scope.row) }}{{ scope.row.unitCodeName }}
          </template>
        </el-table-column>

        <el-table-column prop="targetWarehouse" :label="$t('allocationStorehouseApply.targetWarehouse')" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.shzId" style="width:100%">
              <el-option :value="''" :label="$t('allocationStorehouseApply.selectTargetWarehouse')"></el-option>
              <template v-for="item in storehouses">
                <el-option :key="item.shId" :label="item.shName" :value="item.shId"
                  v-if="item.shId != scope.row.shId && item.communityId == communityId"></el-option>
              </template>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="quantity" :label="$t('allocationStorehouseApply.transferQuantity')" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.curStock" :min="0" :precision="0"
              controls-position="right"></el-input-number>
            {{ scope.row.unitCodeName }}
          </template>
        </el-table-column>

        <el-table-column prop="operation" :label="$t('allocationStorehouseApply.operation')" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="removeItem(scope.row)">
              {{ $t('allocationStorehouseApply.cancelTransfer') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card margin-top" v-if="form.audit.assignee === '-2'">
      <div slot="header" class="clearfix">
        <span>{{ $t('allocationStorehouseApply.approverTitle') }}</span>
      </div>

      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="$t('allocationStorehouseApply.approver')">
              <el-input v-model="form.audit.staffName" :placeholder="$t('allocationStorehouseApply.selectApprover')"
                disabled></el-input>
              <el-button type="primary" class="margin-top" @click="chooseStaff">
                <i class="el-icon-search"></i>
                {{ $t('allocationStorehouseApply.select') }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div class="submit-wrapper">
      <el-button type="primary" @click="submitApply">
        {{ $t('allocationStorehouseApply.submit') }}
      </el-button>
    </div>

    <choose-resource-store ref="chooseResourceStore" @choose="handleChooseResource" />

    <select-staff ref="selectStaff" @select="handleSelectStaff" />
  </div>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import ChooseResourceStore from '@/components/resource/chooseResourceStore'
import SelectStaff from '@/components/resource/selectStaff'
import {
  listStorehouses,
  saveAllocationStorehouse,
  queryFirstAuditStaff
} from '@/api/resource/allocationStorehouseApplyApi'

export default {
  name: 'AllocationStorehouseApplyList',
  components: {
    ChooseResourceStore,
    SelectStaff
  },
  data() {
    return {
      communityId: '',
      form: {
        resourceStores: [],
        storehouses: [],
        remark: '',
        communityId: '',
        shId: '',
        flowId: '',
        audit: {
          assignee: '',
          staffId: '',
          staffName: '',
          taskId: ''
        }
      },
      storehouses: [],
      resourceStores: []
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.form.communityId = this.communityId
    this.loadStorehouses()
  },
  methods: {
    async loadStorehouses() {
      try {
        const params = {
          page: 1,
          row: 100,
          flag: "1",
          communityId: this.communityId
        }
        const res = await listStorehouses(params)
        this.storehouses = res.data
        this.form.storehouses = res.data
      } catch (error) {
        console.error(error)
      }
    },
    openChooseResourceDialog() {
      if (!this.form.shId) {
        this.$message.error(this.$t('allocationStorehouseApply.selectWarehouseFirst'))
        return
      }
      if (!this.form.remark) {
        this.$message.error(this.$t('allocationStorehouseApply.fillRemarkFirst'))
        return
      }
      this.$refs.chooseResourceStore.open({
        resOrderType: '20000',
        shId: this.form.shId,
        isAllocation: true
      })
    },
    handleChooseResource(resources) {
      const oldList = this.resourceStores
      // 过滤重复选择的商品
      const newResources = resources.filter(newItem => {
        return !oldList.some(oldItem => oldItem.resId === newItem.resId)
      })

      // 设置默认值
      newResources.forEach(item => {
        item.shaName = item.shName
        item.shzId = ''
        item.curStock = 0
        if (item.times && item.times.length > 0) {
          item.timesId = item.times[0].timesId
        }
      })

      this.resourceStores = [...newResources, ...oldList]
      this.form.resourceStores = this.resourceStores
    },
    removeItem(item) {
      this.resourceStores = this.resourceStores.filter(i => i.resId !== item.resId)
      this.form.resourceStores = this.resourceStores
      this.$refs.chooseResourceStore.removeSelectedItem(item.resId)
    },
    changeTimesId(value, index) {
      const times = this.resourceStores[index].times
      times.forEach(item => {
        if (item.timesId === value) {
          this.resourceStores[index].selectedStock = item.stock
        }
      })
    },
    getTimesStock(item) {
      if (!item.timesId) return "-"
      let stock = 0
      item.times.forEach(time => {
        if (time.timesId === item.timesId) {
          stock = time.stock
        }
      })
      return stock
    },
    computeFlow() {
      // 清空已选择的商品
      this.resourceStores = []
      this.form.resourceStores = []

      const storehouse = this.storehouses.find(item => item.shId === this.form.shId)
      if (!storehouse) return

      this.form.flowId = storehouse.allocationFlowId
      if (!this.form.flowId) return

      this.loadStaffOrg(this.form.flowId)
    },
    async loadStaffOrg(flowId) {
      try {
        const params = {
          communityId: this.communityId,
          flowId: flowId
        }
        const res = await queryFirstAuditStaff(params)
        if (res.code !== 0) return

        const data = res.data[0]
        Object.assign(this.form.audit, data)
        if (!data.assignee.startsWith('-')) {
          this.form.audit.staffId = data.assignee
        }
      } catch (error) {
        console.error(error)
      }
    },
    chooseStaff() {
      this.$refs.selectStaff.open(this.form.audit)
    },
    handleSelectStaff(staff) {
      this.form.audit.staffId = staff.userId
      this.form.audit.staffName = staff.userName
    },
    async submitApply() {
      // 验证数据
      if (!this.form.remark) {
        this.$message.error(this.$t('allocationStorehouseApply.remarkRequired'))
        return
      }

      if (this.resourceStores.length === 0) {
        this.$message.error(this.$t('allocationStorehouseApply.selectItemsFirst'))
        return
      }

      if (!this.resourcesFromSameHouse(this.resourceStores)) {
        this.$message.error(this.$t('allocationStorehouseApply.sameWarehouseRequired'))
        return
      }

      let isValid = true
      this.resourceStores.forEach(item => {
        if (!item.timesId) {
          this.$message.error(`${item.resName}${this.$t('allocationStorehouseApply.selectPriceFirst')}`)
          isValid = false
          return
        }

        item.curStock = parseFloat(item.curStock)
        if (item.curStock > parseFloat(item.selectedStock)) {
          this.$message.error(`${item.resName}${this.$t('allocationStorehouseApply.stockNotEnough')}`)
          isValid = false
          return
        }

        if (!item.shzId) {
          this.$message.error(this.$t('allocationStorehouseApply.selectTargetWarehouseFirst'))
          isValid = false
          return
        }

        if (item.curStock <= 0) {
          this.$message.error(this.$t('allocationStorehouseApply.fillQuantityFirst'))
          isValid = false
          return
        }
      })

      if (!isValid) return

      try {
        const res = await saveAllocationStorehouse(this.form)
        if (res.code === 0) {
          this.$message.success(this.$t('allocationStorehouseApply.submitSuccess'))
          this.goBack()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        console.error(error)
        this.$message.error(this.$t('allocationStorehouseApply.submitFailed'))
      }
    },
    resourcesFromSameHouse(resources) {
      if (!resources || resources.length < 2) return true

      const firstShId = resources[0].shId
      return resources.every(item => item.shId === firstShId)
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.allocation-storehouse-apply-container {
  padding: 20px;

  .box-card {
    margin-bottom: 20px;
  }

  .margin-top {
    margin-top: 20px;
  }

  .float-right {
    float: right;
  }

  .submit-wrapper {
    text-align: right;
    margin-top: 20px;
  }
}
</style>