ezhizao_dms_vue/src/views/business/storageRetrieval/index.vue

<template>
  <div class="page-container column-container">
    <!-- 搜索区 -->
    <el-form
      class="list-search-container"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
    >
      <el-form-item class="section-title" label="零存库管理" />
      <el-form-item class="section-title" label="工段：">
          <el-select-v2 v-model="queryParams.deptId" :options="deptList" placeholder="请选择工段" style="width: 110px"
            />
        </el-form-item>
      <el-form-item label="批次号：">
        <el-input
          placeholder="请输入批次号"
          v-model.trim="queryParams.lotCode"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="产品描述：">
        <el-input
          placeholder="请输入产品描述"
          v-model.trim="queryParams.productDescription"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="图号：">
        <el-input
          placeholder="请输入图号"
          v-model.trim="queryParams.drawingNumber"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="存录员：">
        <el-input
          placeholder="请输入存录员"
          v-model.trim="queryParams.storagerName"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="零存时间：">
          <el-date-picker v-model="queryParams.startStorageTime" type="date" value-format="YYYY-MM-DD"
              :editable="false" clearable placeholder="请选择" style="width: 136px" />
          <span>~</span>
          <el-date-picker v-model="queryParams.endStorageTime" type="date" value-format="YYYY-MM-DD"
              :editable="false" clearable placeholder="请选择" style="width: 136px"/>
                </el-form-item>
      <el-form-item label="取出批次：">
        <el-input
          placeholder="请输入取出批次"
          v-model.trim="queryParams.retrievalLotCode"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="零取时间：">
                    <el-date-picker v-model="queryParams.startRetrievalTime" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 136px" />
                    <span>~</span>
                    <el-date-picker v-model="queryParams.endRetrievalTime" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 136px"/>
                </el-form-item>
      <el-form-item label="状态：">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择状态"
            style="width: 130px"
          >
            <el-option
              v-for="dict in is_retrieval"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 列表区 -->
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table
          ref="dataTable"
          v-loading="loading"
          border
          :data="dataList"
          highlight-current-row
          height="100%"
        >
          <el-table-column
            type="index"
            label="行号"
            width="50"
            align="center"
          />
          <el-table-column
            label="批次号"
            width="120"
            align="center"
            prop="lotCode"
          />
          <el-table-column
            label="产品描述"
            align="center"
            prop="productDescription"
          />
          <el-table-column
            label="图号"
            width="100"
            align="center"
            prop="drawingNumber"
          />
          <el-table-column
            label="版本号"
            align="center"
            width="70"
            prop="technologyVersion"
          />
          <el-table-column
            label="工段"
            width="90"
            align="center"
            prop="deptName"
          />
          <el-table-column label="存录员" align="center" width="80" prop="storagerName" />
          <el-table-column label="零存数量" align="center" width="150"  prop="storageNum" >
            <template #default="scope">
              <el-input-number v-if="scope.row.editStatus" controls-position="right" v-model="scope.row.storageNum" style="width: 150px"
               :min="0" />
               <span v-else>{{ scope.row.storageNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="零存时间" align="center" width="150" prop="createTime" />
          <el-table-column
            label="取出批次"
            align="center"
            width="120"
            prop="retrievalLotCode"
          />
          <el-table-column
            label="取出时间"
            align="center"
            width="150"
            prop="retrievalTime"
          />
          <el-table-column label="状态" align="center" width="70" prop="status">
              <template #default="scope">
                <dict-tag :options="is_retrieval" :value="scope.row.status" />
              </template>
            </el-table-column>
          <el-table-column label="操作" align="center" width="160">
            <template #default="scope">
              <el-button link v-if="!scope.row.editStatus" type="warning" size="small" icon="Edit"
                               @click="scope.row.editStatus = true" v-hasPermi="['business:storageRetrieval:update']">编辑</el-button>
                    <el-button link v-else type="primary" size="small" icon="Finished" @click="handleSubmit(scope.row)">保存</el-button>
                    <el-button link v-if="scope.row.editStatus" type="info" size="small" icon="Close"
                               @click=" handleCancelEdit">取消编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup>
import { listStorageRetrieval, updateStorageRetrieval } from "@/api/business/storageRetrieval";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
const { proxy } = getCurrentInstance();
/** 字典数组区 */
const { is_retrieval } = proxy.useDict("is_retrieval");
/** 查询对象 */
const queryParams = ref({
  status:'0',
  pageNum: 1,
  pageSize: 10,
});
/** 变量 */
const dataList = ref([]);
const loading = ref(false);
const deptList = ref([]);
const total = ref(0);
const isDispatch = ref(false);

/***********************  方法区  ***********************/
//当前登录人员的咨询部门权限
function getList() {
  getDeptList().then((response) => {
    deptList.value = response.data.rows;
    isDispatch.value = response.data.others.isDispatch;
    loading.value = false;
    if (isDispatch.value) {
      deptList.value.unshift({ label: "全部", value: "0" });
    }
    let index = deptList.value.findIndex(item => {
      return item.label == '外协'
    })
    if (index > -1) {
      deptList.value.splice(index, 1)
    }
    queryParams.value.deptId = deptList.value[0].value;
    getStorageRetrievalList();
  });
}
/** 查询列表 */
function getStorageRetrievalList() {
  loading.value = true;
  listStorageRetrieval(queryParams.value).then((res) => {
    if(res.rows.length > 0) {
      res.rows.forEach(element => {
        element.editStatus = false
      });
    }
    dataList.value = res.rows;
    console.log(dataList.value)
    total.value = res.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getStorageRetrievalList();
}
//保存
function handleSubmit(data) {
  updateStorageRetrieval(data).then(res =>{
    proxy.$modal.msgSuccess("保存成功");
    getStorageRetrievalList()
  })
}
//取消编辑
function handleCancelEdit() {
  getStorageRetrievalList()
}


onMounted(() => {
  getList();
});
</script>