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

<template>
  <div id="addAddress">
    <el-card style="height: calc(100vh - 15vh);position: relative;overflow: scroll;">
    <span>基本信息</span>
    <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="mini"
                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="mini"
                disabled
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

        <el-col :span="1.5">
            <el-form-item label="仓库档案名称">
              <el-select size="mini" v-model="basicForm.warehouse" :disabled="sonDisable" @focus="chooseRefer('WAREHOUSE_PARAM', true, '仓库档案名称')" style="width: 200px">
                <el-option v-for="item in houseOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
          <el-form-item label="仓库属性">
              <el-select :disabled="sonDisable" v-model="basicForm.warehouseProperty" size="mini" style="width: 200px">
                <el-option v-for="dict in dict.type.sys_warehouse_attribute" :key="dict.value" :label="dict.label" :value="dict.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="mini"
                :disabled="sonDisable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="联系人">
              <el-select size="mini" v-model="basicForm.contacts" :disabled="sonDisable" @focus="chooseRefer('CONTACTS_PARAM', true, '联系人')" style="width: 200px">
                <el-option v-for="item in contactsOptions" :key="item.id" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
         </el-col>

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

          <el-col :span="1.5">
            <el-form-item label="物料分类">
              <el-select
                v-model="basicForm.materialClassify"
                size="mini"
                :disabled="sonDisable"
                clearable
                @focus="chooseTreeRefer('MATERIALCLASSIFY_PARAM', false, '物料分类')"
                style="width: 200px"
                >
                <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="启用">
              <el-select disabled v-model="basicForm.status" size="mini" style="width: 200px">
                <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 disabled v-model="basicForm.sendStatus" size="mini" style="width: 200px">
                <el-option
                  v-for="item in options2"
                  :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="mini"
                :disabled="sonDisable"
                clearable
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

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

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

    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>

    <TreeRefers ref="tree" @doSubmit="selectionsToInput2" :single="true"/>
  </div>
</template>

<script>
import Refers from '@/components/Refers/refers.vue'
import TreeRefers from '@/components/Refers/sigleTreeRefer.vue'
import {addAddress, getAddressDetail, editAddress} from '@/api/purchase/deliveryAddress.js'
// 用于回显参照框数据
import { getRefer } from '@/api/purchase/basic.js'
export default {
  name: 'addAddress',
  dicts: ['sys_warehouse_attribute'],
  props: ['pageStu','row', 'disable'],
  components: {
    Refers,
    TreeRefers
  },
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      basicForm: {
        code: '',
        name: '',
        warehouse: '',
        warehouseName: '',
        warehouseProperty: '',
        address: '',
        contacts: '',
        contactsName: '',
        contactsPhone: '',
        materialClassify: '',
        materialClassifyName: '',
        status: 'Y',
        sendStatus: 'N',
        remark: '',
      },
      referCondition: {
        type: '',
        isPage: true,
        title: ''
      },
      options: [{
        value: 'Y', label: '启用',
      }, {
        value: 'N', label: '停用'
      }],
      options2: [{
        value: 'Y', label: '已同步',
      }, {
        value: 'N', label: '未同步'
      }],
      houseOptions: [],
      contactsOptions: [],
      classOptions: [],
      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.sonPageStu == 'add') {
        this.$modal.loading("保存中...");
        addAddress(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.notifySuccess("保存成功");
            this.$modal.closeLoading();
            this.back()
          }
        }).catch(err => {
          this.$modal.closeLoading();
        })
      } else if (this.sonPageStu == 'edit') {
        this.$modal.loading("保存中...");
        editAddress(this.basicForm).then(res => {
          if (res.code === 200) {
            this.$modal.notifySuccess("编辑成功");
            this.$modal.closeLoading();
            this.back()
          }
        }).catch(err => {
          this.$modal.closeLoading();
        })
      }
    },
    editPage() {
      this.sonPageStu = 'edit'
      this.sonDisable = false
    },
    submit() {},
    back() {
      this.$emit('jugislist', true)
      // let queryParams = {
      //   pageNum: 1,
      //   pageSize: 10
      // }
      this.$emit('refresh')
    },
    // 如果需要回显则调用详情接口
    getDetails(row) {
      getAddressDetail(row.id).then(res => {
        if (res.code === 200) {
          this.basicForm = res.data
          if (this.basicForm.warehouse) { this.reBackRefer('WAREHOUSE_PARAM', this.basicForm.warehouse) }
          if (this.basicForm.contacts) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.contacts) }
          if (this.basicForm.materialClassify) { this.reBackRefer('MATERIALCLASSIFY_PARAM', this.basicForm.materialClassify) }
        }
      })
    },
    chooseRefer(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.refer.init(this.referCondition)
    },
    selectionsToInput(selection) {
      if (this.referCondition.type == 'WAREHOUSE_PARAM') {
        this.houseOptions = selection
        this.basicForm.warehouseName = selection[0].name
        this.basicForm.name = selection[0].name
        this.basicForm.warehouse = selection[0].id
      }
      if (this.referCondition.type == 'CONTACTS_PARAM') {
        this.contactsOptions = selection
        this.basicForm.contactsName = selection[0].name
        this.basicForm.contacts = selection[0].code
      }
    },
    chooseTreeRefer(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.tree.init(this.referCondition)
    },
    selectionsToInput2(selection) {
      this.classOptions.push(selection)
      this.basicForm.materialClassify = selection.id
      this.basicForm.materialClassifyName = selection.name
    },
    // 回显参照框 加title解决判断重复提交问题
    reBackRefer(type, id, title) {
      getRefer({ type: type, id: id, title: title }).then(res => {
        if (type == 'WAREHOUSE_PARAM') {
          this.houseOptions = res.rows
        }
        if (type == 'CONTACTS_PARAM') {
          this.contactsOptions = res.rows
        }
        if (type == 'MATERIALCLASSIFY_PARAM') {
          this.classOptions = res.rows
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  // width: 100%;
  // margin: 20px 0;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 10px;right: 20px;
} 
</style>