patrol-wzgl-web/src/views/storages/components/addWarehouse.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width='800' :is-show.sync="isShow" type="form" :title="type==='add'?'新增库房':'编辑库房'"
      :form="form" :rules="rules" @submit="submit">
      <template v-slot:type_id>
        <div class="xy-table-item type-dialog-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库类型：
          </div>
          <div class="xy-table-item-content">
            <Select v-model="form.type_id" style="width:500px;" placeholder="请选择仓库类型">
              <Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
          </div>
        </div>
      </template>
      <template v-slot:warehouse_id>
        <div class="xy-table-item type-dialog-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
          </div>
          <div class="xy-table-item-content">
            <Select v-model="form.warehouse_id" style="width:500px;" placeholder="请选择仓库名称">
              <Option v-for="item in warehouseList" :key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
          </div>
        </div>
      </template>
      <template v-slot:name>
        <div class="xy-table-item type-dialog-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>库房名称：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width:500px; font-size:18px;" v-model="form.name" placeholder="请输入库房名称"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:beizhu>
        <div class="xy-table-item type-dialog-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
          </div>
          <div class="xy-table-item-content">
            <el-input style="width:500px; font-size:18px;" v-model="form.beizhu" placeholder="请输入备注"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { saveWarehouseType } from '@/api/system/warehouse'
import { getStorehouseTypeList } from '@/api/system/storehouseType'
import { Message } from 'element-ui'
export default {
  props: {
    warehouseList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShow: false,
      type: 'add',
      id: '',
      typeList: [],
      form: {
        type_id: '',
        warehouse_id: '',
        name: '',
        beizhu: ''
      },
      rules: {
        type_id: [{ required: true, message: '请选择仓库类型' }],
        warehouse_id: [{ required: true, message: '请选择仓库名称' }],
        name: [{ required: true, message: '请填写库房名称' }]
      }
    }
  },
  created() {
    this.getTypeList();
  },
  methods: {
    async getTypeList() {
      try {
        const formData = new FormData();
        formData.append('page', 1);
        formData.append('page_size', 1000);
        const res = await getStorehouseTypeList(formData);
        this.typeList = res.data;
      } catch (e) {
        Message.error('获取仓库类型列表失败');
      }
    },
    open(type = 'add', row = null) {
      this.type = type;
      this.isShow = true;
      this.$nextTick(() => {
        if (this.$refs.dialog && this.$refs.dialog.$refs.form) {
          this.$refs.dialog.$refs.form.resetFields();
        }
      });
      if (type === 'editor' && row) {
        this.id = row.id;
        Object.assign(this.form, {
          type_id: row.type_id || '',
          warehouse_id: row.warehouse_id || '',
          name: row.name || '',
          beizhu: row.remark || ''
        });
      } else {
        this.id = '';
        Object.assign(this.form, {
          type_id: '',
          warehouse_id: '',
          name: '',
          beizhu: ''
        });
      }
    },
    submit() {
      const params = {
        type_id: this.form.type_id,
        warehouse_id: this.form.warehouse_id,
        name: this.form.name,
        remark: this.form.beizhu
      };
      if (this.type === 'editor') {
        params.id = this.id;
      }
      saveWarehouseType(params).then(res => {
        Message({
          type: 'success',
          message: this.type === 'add' ? '新增成功' : '编辑成功'
        })
        this.$emit('refresh')
        this.isShow = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .xy-table-item-label {
    min-width: 120px !important;
    font-size: 16px;
    text-align: right;
  }
  .type-dialog-item {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .xy-table-item-content {
    display: flex;
    align-items: center;
  }
  ::v-deep .el-dialog {
    border-radius: 12px;
  }
  ::v-deep .el-button--primary {
    border-radius: 6px;
    font-size: 15px;
    padding: 8px 24px;
  }
</style>