auth-web/src/pages/auth-object-manage/service-resource-manage/add-form.vue

<!--
新增服务资源
@Author: linqian
@Date: 2021-05-17 15:07
-->
<template>
  <dg-row>
    <el-form ref="form" :model="form" :rules="rules" label-width="180px" v-if="show">
      <dg-col :span="12">
        <el-form-item label="服务资源标识符：" prop="serviceCode">
          <el-input
            v-model="form.serviceCode"
            placeholder="请输入服务资源标识符"
            :disabled="form.id !== null && form.id !== undefined"
            v-if="!isDetail"
          ></el-input>
          <span v-else>{{ form.serviceCode }}</span>
        </el-form-item>
        <el-form-item label="服务类型：" prop="serviceType">
          <dg-select
            v-model="form.serviceType"
            enum="ServiceResourceTypeEnum"
            placeholder="请选择服务类型"
            v-if="!isDetail"
          ></dg-select>
          <div v-else>
            <div class="u-detail__text" v-translate="{ enum: 'ServiceResourceTypeEnum' }">
              {{ form.serviceType }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="是否自用服务：" prop="mustSelf">
          <dg-select
            v-model="form.mustSelf"
            enum="BooleanEnum"
            v-if="!isDetail"
            placeholder="请选择是否自用服务"
            clearable
          ></dg-select>
          <div v-else>
            <div class="u-detail__text" v-translate="{ enum: 'BooleanEnum' }">{{ form.mustSelf }}</div>
          </div>
        </el-form-item>
      </dg-col>
      <dg-col :span="12">
        <el-form-item label="服务资源名称：" prop="serviceName">
          <el-input v-model="form.serviceName" placeholder="请输入服务资源名称" v-if="!isDetail"></el-input>
          <span v-else>{{ form.serviceName }}</span>
        </el-form-item>
        <el-form-item label="服务提供方式：" prop="serviceProvideWay">
          <dg-select
            v-model="form.serviceProvideWay"
            enum="ServiceProvideWayEnum"
            placeholder="请选择服务提供方式"
            v-if="!isDetail"
          ></dg-select>
          <div v-else>
            <div class="u-detail__text" v-translate="{ enum: 'ServiceProvideWayEnum' }">
              {{ form.serviceProvideWay }}
            </div>
          </div>
        </el-form-item>
      </dg-col>
      <dg-col :span="24">
        <el-form-item label="服务提供应用系统名称：" prop="appCode">
          <dg-select
            :data="apps"
            v-model="form.appCode"
            placeholder="服务提供应用系统名称"
            value-name="applyCode"
            label-name="applyName"
            filterable
            v-if="!isDetail"
          ></dg-select>
          <span v-else>{{ form.appName }}</span>
        </el-form-item>
      </dg-col>
      <dg-col :span="24">
        <el-form-item label="服务访问地址：" prop="serviceUrl">
          <el-input v-model="form.serviceUrl" placeholder="参数为字符串类型的数组对象" v-if="!isDetail"></el-input>
          <span v-else>{{ form.serviceUrl }}</span>
        </el-form-item>
      </dg-col>
      <dg-col :span="24">
        <el-form-item label="服务资源描述：" prop="remark">
          <el-input
            v-model="form.remark"
            placeholder="请输入服务资源描述"
            type="textarea"
            :rows="3"
            v-if="!isDetail"
          ></el-input>
          <span v-else>{{ form.remark }}</span>
        </el-form-item>
      </dg-col>
    </el-form>
    <div v-footer>
      <dg-button @click="handleClose">{{ isDetail ? '关闭' : '取消' }}</dg-button>
      <dg-button v-if="!isDetail" type="primary" @click="handleSave">保存</dg-button>
    </div>
  </dg-row>
</template>

<script>
import * as Api from '@/api/ser-resource-manage';
import { allApps } from '@/api/application';

export default {
  props: {
    id: String,
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      form: {
        appCode: '',
        appName: '',
        mustSelf: '',
        remark: '',
        serviceCode: '',
        serviceName: '',
        serviceProvideWay: '',
        serviceType: '',
        serviceUrl: ''
      },
      rules: {
        serviceCode: [{ required: true, message: '请输入服务资源标识符', trigger: 'change' }],
        serviceName: [{ required: true, message: '请输入服务资源名称', trigger: 'change' }],
        serviceType: [{ required: true, message: '请输入服务类型', trigger: 'change' }],
        serviceProvideWay: [{ required: true, message: '请选择服务提供方式', trigger: 'change' }],
        serviceUrl: [{ required: true, message: '请输入服务访问地址', trigger: 'change' }],
        appCode: [{ required: true, message: '请输入服务提供应用系统名称', trigger: 'change' }]
        // mustSelf: [{ required: true, message: "请选择是否自动服务", trigger: "change" }]
      },
      apps: [],
      show: false
    };
  },
  computed: {},
  methods: {
    /**
     * 取消、关闭
     */
    handleClose() {
      this.$emit('close');
    },
    /**
     * 保存
     */
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const api = this.id ? 'update' : 'save';
          Api[api](this.form)
            .then((res) => {
              const { result, msg } = res.data;
              if (result == '200') {
                this.$message.success('保存成功!');
                this.$emit('success');
              } else {
                this.$message.warning(msg);
              }
            })
            .catch((error) => {
              this.$message.error(error);
            });
        }
      });
    },
    /**
     * 获取详情
     */
    getDetail() {
      Api.detail(this.id).then((res) => {
        this.form = res.data.content;
        this.show = true;
      });
    },

    /**
     * 获取应用列表
     */
    getAllApps() {
      return new Promise((resolve) => {
        allApps('').then((res) => {
          this.apps = res;
          resolve(res);
        });
      });
    }
  },
  async created() {
    await this.getAllApps();
    if (this.id) {
      if (this.isDetail) {
        this.rules = {};
      }
      this.getDetail();
    } else {
      this.show = true;
    }
  },
  mounted() {
  
  }
};
</script>

<style lang='scss'>
</style>