drp-ui/src/views/purchase/deliveryAddress/add.vue

<template>
  <div id="addAddress">
    <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="1.5">
            <el-form-item label="收货仓库编码">
              <el-input
                v-model="basicForm.code"
                size="small"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

        <el-col :span="1.5">
            <el-form-item label="收货仓库名称">
              <el-input
                v-model="basicForm.name"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

        <el-col :span="1.5">
            <el-form-item label="仓库档案名称">
              <el-input
                v-model="basicForm.warehouseCode"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="仓库属性">
              <el-select v-model="basicForm.warehouseProperty" size="small" style="width: 200px" clearable :disabled="disable">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="地址信息">
              <el-input
                v-model="basicForm.address"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="联系人">
              <el-input
                v-model="basicForm.contactsName"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="联系人电话">
              <el-input
                v-model="basicForm.contactsPhone"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="物料分类">
              <el-input
                v-model="basicForm.materialClassify"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="启用">
              <el-select v-model="basicForm.status" size="small" style="width: 200px" clearable :disabled="disable">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="同步状态">
              <el-select v-model="basicForm.sendStatus" size="small" style="width: 200px" clearable :disabled="disable">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="备注">
              <el-input
                v-model="basicForm.remark"
                size="small"
                :disabled="disable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

      </el-row>
    </el-form>

    <div class="btn_group">
      <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="save" v-if="pageStu == 'add' || pageStu == 'edit'">保存</el-button>
      </el-col>
      <!-- <el-col :span="1.5" style="margin: 0 10px;">
        <el-button type="primary" size="small" plain @click="submit" v-if="pageStu == 'edit'">提交</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button size="small" plain @click="back">返回</el-button>
      </el-col>
    </div>
  </div>
</template>

<script>
import {addAddress, getAddressDetail, editAddress} from '@/api/purchase/deliveryAddress.js'
export default {
  name: 'addAddress',
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      basicForm: {
        code: '',
        name: '',
        warehouse: '',
        warehouseCode: '',
        warehouseProperty: '',
        address: '',
        contacts: '',
        contactsName: '',
        contactsPhone: '',
        materialClassify: '',
        materialClassifyName: '',
        status: '',
        sendStatus: '',
        remark: '',
      },
      options: [{
        value: '1', label: '是',
      }, {
        value: '0', label: '否'
      }],
      basicRules: {}
    }
  },
  mounted() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      this.getDetails(this.row)
    } else if(this.pageStu == 'edit') {
      this.getDetails(this.row)
    }
  },
  methods: {
    save() {
      if(this.pageStu == 'add') {
        addAddress(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("保存成功");
            this.back()
          }
        })
      } else if (this.pageStu == 'edit') {
        editAddress(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("编辑成功");
            this.back()
          }
        })
      }
    },
    submit() {},
    back() {
      this.$emit('jugislist', true)
      let queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.$emit('refresh', queryParams)
    },
    // 如果需要回显则调用详情接口
    getDetails(row) {
      getAddressDetail(row.id).then(res => {
        if (res.code === 200) {
          this.basicForm = res.data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  width: 100%;
  margin: 20px 0;
  display: flex;
  justify-content: center;
} 
</style>