goelia-ai-admin/src/views/oms/storage/channelWarehouse.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        :placeholder="$t('label.warehouseCode')"
        :clearable="true"
        style="width: 200px;"
        class="filter-item"
        v-model="listQuery.warehouseCode"
      />

      <el-select
        v-model="listQuery.channelCode"
        :clearable="true"
        class="filter-item"
        style="width: 200px;"
        :placeholder="$t('place.channelCode')"
      >
        <el-option
          v-for="item in channelList"
          :key="item.channelCode"
          :label="item.channelCode"
          :value="item.channelCode"
        />
      </el-select>

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >{{ $t("view.search") }}</el-button
      >

      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-circle-plus"
        @click="handleCreate"
      >{{ $t("view.create") }}</el-button
      >
    </div>

    <el-table
      style="width: 100%;"
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      row-key="id"
      stripe
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index"> </el-table-column>
      <el-table-column
        :label="$t('label.warehouseCode')"
        width="150"
        align="center"
        prop="warehouseCode"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.warehouseName')"
        min-width="120"
        align="center"
        prop="warehouseName"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.providerWarehouseCode')"
        width="200"
        align="center"
        prop="providerWarehouseCode"
      >
      </el-table-column>
      <el-table-column
        :label="$t('label.channelCode')"
        width="200"
        align="center"
        prop="channelCode"
      >
      </el-table-column>

      <el-table-column
        :label="$t('label.channelName')"
        min-width="120"
        align="center"
        prop="channelName"
      >
      </el-table-column>

      <el-table-column
        label="默认仓库"
        min-width="60"
        align="center"
        prop="defaultFlag"
      >
      <template slot-scope="scope">
        {{
          scope.row.defaultFlag === 1 ? '是' : '否'
        }}
      </template>
      </el-table-column>

      <el-table-column
        :label="$t('label.operation')"
        min-width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('view.edit')"
            placement="top-start"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.row)"
            >
            </el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="设为默认"
            placement="top-start"
            v-if="scope.row.defaultFlag == 0"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-set-up"
              circle
              @click="handleDefault(scope.row.id)"
            >
            </el-button>

          </el-tooltip>


<!--          <el-tooltip-->
<!--            class="item"-->
<!--            effect="dark"-->
<!--            :content="$t('view.ruleBinding')"-->
<!--            placement="top-start"-->
<!--          >-->
<!--            <el-button-->
<!--              type="primary"-->
<!--              circle-->
<!--              size="mini"-->
<!--              icon="el-icon-set-up"-->
<!--              @click="handleStoreRule(scope.row.storeId)"-->
<!--            >-->
<!--            </el-button>-->
<!--          </el-tooltip>-->

          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('view.delete')"
            placement="top-start"
          >
            <el-button
              type="danger"
              circle
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <swPage
      v-if="total > 0"
      key="2"
      :listQuery="listQuery"
      :total="total"
      pos="btmRight"
      @retPage="retPage"
    />

    <el-dialog
      :title="$t('title.editWarehouse')"
      v-if="storeVisible"
      :close-on-click-modal="false"
      :visible.sync="storeVisible"
    >
      <el-form
        :rules="rules"
        ref="storeForm"
        :model="storeForm"
        label-width="auto"
      >
        <el-form-item :label="$t('label.warehouseCode')" prop="warehouseCode">
          <el-select
            clearable
            v-model="storeForm.warehouseCode"
            @change="handleWarehouseCodeChange"
            :placeholder="$t('place.enterReturnWarehouseCode')"
            class="normal-input"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.warehouseCode"
              :label="item.warehouseCode"
              :value="item.warehouseCode"
            />
          </el-select>

        </el-form-item>
        <el-form-item :label="$t('label.warehouseName')" prop="warehouseName">
          <el-input
            disabled
            v-model="storeForm.warehouseName"
            :placeholder="$t('place.enterReturnWarehouseName')"
            class="normal-input"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('label.channelCode')" prop="channelCode">
          <el-select
            clearable
            v-model="storeForm.channelCode"
            @change="handleChannelCodeChange"
            :placeholder="$t('place.pleaseEnterChannelCode')"
            class="normal-input"
          >
            <el-option
              v-for="item in channelList"
              :key="item.channelCode"
              :label="item.channelCode"
              :value="item.channelCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('label.channelName')" prop="channelName">
          <el-input
            v-model="storeForm.channelName"
            :placeholder="$t('place.pleaseEnterChannelName')"
            class="normal-input"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('label.providerWarehouseCode')" prop="providerWarehouseCode">
          <el-input
            v-model="storeForm.providerWarehouseCode"
            :placeholder="$t('place.enterReturnWarehouseCode')"
            class="normal-input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="storeSubmit('storeForm')">{{
              $t("determine")
            }}</el-button>
          <el-button type="danger" @click="storeCancel">{{
              $t("back")
            }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <storeOrderRuleDialog
      :key="storeId"
      ref="storeOrderRuleDialog"
      :storeId="storeId"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import global from "@/views/oms/global";
import { getToken } from "@/utils/auth";
import storeOrderRuleDialog from "@/views/oms/basicConfig/components/storeOrderRuleDialog";

import {
  deleteImsChannelById,
  imsChannelWarehouseList,
  saveImsChannelWarehouse,
  setDefault
} from "@/api/oms/storage/channelWarehouse";
import {imsChannelList} from "@/api/oms/storage/channelManagement";
import {fetchList} from "@/api/oms/inventory/warehouse";
export default {
  name: "channelMgt",
  directives: {
    waves
  },
  components: {
    swPage,
    storeOrderRuleDialog,
    global
  },
  filters: {},
  data() {
    return {
      dialogSize: "40%",
      titleData: "",
      confirmSh: 0,
      direction: "rtl",
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      //查询条件
      listQuery: {
        page: 1,
        limit: 10,
        warehouseCode: "",
        channelCode: ""
      },
      storeForm: {
        id: "",
        warehouseCode: "",
        channelCode: "",
        warehouseName: "",
        channelName: "",
        providerWarehouseCode: ""
      },
      flag: false,
      channelList: [],
      warehouseList:[],
      rules: {
        channelName: [
          { required: true, message: "请输入渠道名称", trigger: "blur" }
        ],
        channelCode: [
          { required: true, message: "请选择渠道编码", trigger: "change" }
        ],
        warehouseCode: [
          { required: true, message: "请输入仓库编码", trigger: "change" }
        ],
        warehouseName: [
          { required: true, message: "请输入仓库名称", trigger: "blur" }
        ],
        providerWarehouseCode: [
          { required: true, message: "请输入服务商仓库编码", trigger: "blur" }
        ]
      },
      storeId: "",
      storeVisible: false,
      baseURL: process.env.VUE_APP_OMS_API //把url前面的域名拿出来
    };
  },
  created() {
    this.getList();
    this.getChannel();
    this.getWarehouse();
  },
  activated() {
    this.getList();
    this.getChannel();
    this.getWarehouse();
  },
  computed: {
    // 计算属性的 getter
    headers: function() {
      return {
        "X-Token": getToken()
      };
    }
  },
  methods: {
    handleDefault(id){
      this.$confirm('确认设置为默认仓库？', this.$t("tips"), {
        confirmButtonText: this.$t("determine"),
        cancelButtonText: this.$t("Cancellation"),
        type: "warning"
      }).then(() => {
        setDefault(id).then(res => {
          if (200 == res.code) {
            this.$message({
              message: this.$t("optSuccess"),
              type: "success"
            });
            this.getList();
          }
        });
      });
    },
    handleChannelCodeChange() {
      const selectedChannel = this.channelList.find(item => item.channelCode === this.storeForm.channelCode);
      if (selectedChannel) {
        this.storeForm.channelName = selectedChannel.channelName;
      } else {
        this.storeForm.channelName = '';
      }
    },
    handleWarehouseCodeChange() {
      const selectedChannel = this.warehouseList.find(item => item.warehouseCode === this.storeForm.warehouseCode);
      if (selectedChannel) {
        this.storeForm.warehouseName = selectedChannel.warehouseName;
      } else {
        this.storeForm.warehouseName = '';
      }
    },
    getList() {
      this.listLoading = true;
      imsChannelWarehouseList(this.listQuery).then(res => {
        if (200 == res.code) {
          this.total = res.data.total;
          this.list = res.data.list;
        }
        this.listLoading = false;
      });
    },

    handleStoreRule(id) {
      //这里这样写是因为有组件加载问题
      if (id == this.storeId) {
        this.$refs.storeOrderRuleDialog.showDialog();
      } else {
        var that = this;
        this.storeId = id;
        setTimeout(function() {
          that.handleStoreRule(id);
        }, 100);
      }
    },

    getChannel() {
      imsChannelList().then(res => {
        if (200 == res.code) {
          this.channelList = res.data.list;
        }
      });
    },
    getWarehouse() {
      let query = {
        warehouseType:70,
        page:1,
        limit:100,
        status: 1,
      }
      fetchList(query).then(res => {
        if (200 == res.code) {
          this.warehouseList = res.data.list;
        }
      });
    },
    retPage() {
      //分页
      this.getList();
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    backTable() {
      this.getList();
    },

    handleCreate() {
      //清空数据
      this.storeForm.id = "";
      this.storeForm.channelCode = "";
      this.storeForm.warehouseName = "";
      this.storeForm.channelName = "";
      this.storeForm.warehouseCode = "";
      this.storeForm.providerWarehouseCode= "";
      this.flag = false;
      this.storeVisible = true;
    },

    handleEdit(store) {
      this.storeForm.id = store.id;
      this.storeForm.warehouseName = store.warehouseName;
      this.storeForm.channelCode = store.channelCode;
      this.storeForm.channelName = store.channelName;
      this.storeForm.warehouseCode = store.warehouseCode;
      this.storeForm.providerWarehouseCode= store.providerWarehouseCode;
      this.flag = true;
      this.storeVisible = true;
    },
    handleDelete(id) {
      this.$confirm("是否删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteImsChannelById(id).then(res => {
            if (200 == res.code) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
        });
    },

    storeSubmit(storeForm) {
      this.$refs[storeForm].validate(valid => {
        if (valid) {
          var store = {
            id: this.storeForm.id,
            providerWarehouseCode: this.storeForm.providerWarehouseCode,
            channelName: this.storeForm.channelName,
            channelCode: this.storeForm.channelCode,
            warehouseCode: this.storeForm.warehouseCode,
            warehouseName: this.storeForm.warehouseName,
            orgId: 100, //暂时写死
            serverUrl: 1 //暂时写死
          };
          this.listLoading = true;
          saveImsChannelWarehouse(store).then(res => {
            if (200 == res.code) {
              this.$message({
                message: this.$t("optSuccess"),
                type: "success"
              });
              this.listLoading = false;
              this.getList();
            }
          });
          this.listLoading = false;
          this.storeVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    storeCancel() {
      this.storeVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
.cell > span {
  white-space: nowrap !important;
}

.card-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>