udiwms-vue-frame/src/views/thirdSys/api/DialogEditBusDown.vue

<template>
  <div>
    <el-form>
      <el-row :gutter="20" class="el-row" type="flex">
        <el-col :span="24">
          <el-form-item label="单据类型:" label-width="120px">
            <el-select style="width: 80%;" v-model="thirdBuyForm.name" placeholder="单据类型">
              <el-option
                v-for="item in bussinessTypeList"
                :key="item.action"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el-row" type="flex">
        <el-col :span="24" class="el-col">
          <el-form-item label-width="120px" label="第三方单据类型:">
            <el-select
              v-model="thirdBuyForm.thirdBuyCode"
              filterable
              remote
              style="width: 80%;"
              clearable="true"
              reserve-keyword
              placeholder="请选择第三方单据类型"
              :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in thridBusFilter"
                :key="item.action"
                :label="item.name"
                :value="item.action">
                <span style="float: left;font-size: 13px">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 10px">{{
                    item.remark
                  }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el-row" type="flex">
        <el-col :span="24" class="el-col">
          <el-form-item label-width="120px" label="接口地址:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              v-model="thirdBuyForm.url"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el-row" type="flex">
        <el-col :span="24" class="el-col">
          <el-form-item label-width="120px" label="备注:">
            <el-input
              style="width: 80%"
              size="small"
              splaceholder="请输入内容"
              type="textarea"
              row="3"
              v-model="thirdBuyForm.remark"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click.native="editGeOrderParamVisible = !editGeOrderParamVisible"
      >取消
      </el-button
      >
      <el-button
        type="primary"
        @click.native="addBussinessTypeData()"
      >提交
      </el-button>
    </div>

  </div>
</template>

<script>
import {getOriginBusType} from "@/api/basic/busOriginType";
import {filterForThirdSys} from "@/api/basic/busType";
import {isBlank} from "@/utils/strUtil";
import {saveBusTypes} from "@/api/thrsys/basicThirdSys";

export default {
  name: "DialogEditBusDown",
  props: {
    thirdBuyForm: {
      type: Object,
      required: true,
    },
    closeDialog: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      bussinessTypeList: [],
      thridBusFilter: [],
    }

  },
  methods: {
    remoteMethod(keyword) {
      let query = {
        key: keyword,
        thirdSys: this.thirdSysFk
      }
      getOriginBusType(query).then((res) => {
        this.thridBusFilter = res.data.list;
      });
    },


    getBussinessType() {
      filterForThirdSys().then((res) => {
        this.bussinessTypeList = res.data;
      })
    },

    addBussinessTypeData() {
      //校验表单数据
      if (isBlank(this.thirdBuyForm.name)) {
        this.$message.error("单据类型不能为空！")
        return;
      }
      if (isBlank(this.thirdBuyForm.thirdBuyCode)) {
        this.$message.error("第三方单据类型不能为空！");
        return;
      }

      if (!isBlank(this.thirdBuyForm.remark)) {
        if (this.thirdBuyForm.remark.length > 200) {
          this.$message.error("备注信息不得超过200字");
          return;
        }
      }

      if (this.getOrdersEditBtnVisible) {
        this.editGeOrderParamVisible = false;
      } else {
        this.bussinessTypeFormVisible = false;
      }

      //匹配编码
      this.bussinessTypeList.forEach(item => {
        //单据业务类型编码
        if (item.name === this.thirdBuyForm.name) {
          this.thirdBuyForm.code = item.action;
        }
      });


      saveBusTypes(this.thirdBuyForm).then((res) => {
        if (res.code == 20000) {
          this.closeDialog(true);
        } else
          this.$message.error(res.message);
      }).catch((error) => {
        this.$message.error(error.message);
      })
    },
  },

  created() {
    this.getBussinessType();
    this.remoteMethod();
  }
}
</script>

<style scoped>

</style>