epmet-oper-lingshan/epmet-oper-web/src/views/modules/partner/app/edit.vue

<template>
  <el-dialog :visible.sync="visible"
             :title="'编辑外部应用'"
             :close-on-click-modal="false"
             :before-close="handleClose"
             :close-on-press-escape="false">
    <el-form :inline="true"
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             :label-width="'120px'">
      <el-form-item label="应用名称"
                    prop="appName">
        <el-input class="item_width_1"
                  v-model="dataForm.appName"
                  placeholder="应用名称"></el-input>
      </el-form-item>

      <el-form-item label="所属客户"
                    prop="customerId">
        <div>
          <el-radio-group v-model="dataForm.customerType"
                          @change="onSelectedCustomerTypeChange">
            <el-radio label="external">外部客户</el-radio>
            <el-radio label="internal">内部客户</el-radio>
          </el-radio-group>
        </div>
        <el-select class="item_width_1"
                   v-model="dataForm.customerId"
                   placeholder="请选择"
                   clearable>
          <el-option v-for="item in customerList"
                     :key="item.customerId"
                     :label="item.customerName"
                     :value="item.customerId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary"
                 @click="saveForm()">{{
        $t("confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import { envIsDev, mockUrlPrefix } from "@/js/dai/config";

// 当前是否是开发环境
const isMockEnv = envIsDev && false;
const requestUrlPrefix = isMockEnv ? mockUrlPrefix : "";

let loading; // 加载动画
export default {
  data () {
    return {
      visible: false,
      type: "", // 操作类型A/U
      dataForm: {
        appId: "",
        appName: "",
        customerId: "",
        customerName: "",
        customerType: "internal",
      },
      customerList: [
        // {
        //   customerId: "",
        //   customerName: "",
        // }
      ],
    };
  },
  mounted () {
    this.queryCustomerList();
  },
  computed: {
    dataRule () {
      return {
        customerId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        appName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    async queryCustomerList () {
      if (this.dataForm.customerType === 'external') {
        this.queryExternalCustomerList();
      } else {
        this.queryInternalCustomerList();
      }
    },
    // 加载外部客户列表
    async queryExternalCustomerList () {
      debugger
      const { data, code, msg } = await requestPost(
        requestUrlPrefix + "/commonservice/externalcustomer/list",
        {
          pageNo: 1,
          pageSize: 1000,
        }
      );

      if (code === 0) {
        this.customerList = data.list;
      }
    },
    // 加载内部客户列表
    queryInternalCustomerList () {
      window.app.ajax.get(
        "/oper/crm/customer/getvalidcustomerlist",
        {},
        (data, rspMsg) => {
          this.customerList = data;
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        }
      )
    },
    // 客户类型单选框变化
    onSelectedCustomerTypeChange (value) {
      this.dataForm.customerType = value;
      this.queryCustomerList();
    },
    init (dataForm, type) {
      this.type = type;
      this.visible = true;
      // this.dataForm=dataForm

      this.$nextTick(() => {
        Object.assign(this.dataForm, dataForm);
        this.queryCustomerList();
      });
    },
    addRequest () {
      this.dataForm.domainNameList.push("");
    },
    delRequest (index) {
      this.dataForm.domainNameList.splice(index, 1);
    },

    saveForm () {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          this.$message.error("表单验证失败!");
        } else {
          let url = "";
          if (this.type === "U") {
            url = requestUrlPrefix + "/commonservice/externalapp/update";
          } else {
            url = requestUrlPrefix + "/commonservice/externalapp/add";
          }
          this.dataForm.functionGroup = "1";
          window.app.ajax.post(
            url,
            this.dataForm,
            (data, rspMsg) => {
              this.$message({
                type: "success",
                message: "保存成功",
              });
              this.$emit("editDiaOK");
              this.visible = false;
            },
            (rspMsg, data) => {
              this.endLoading();
              this.$message.error(rspMsg);
            }
          );
        }
      });
    },
    handleClose () {
      this.visible = false;
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

<style scoped>
.function-icon {
  width: 28px;
}
.item_width_1 {
  width: 300px;
}
.item_width_2 {
  width: 700px;
}
.block {
  display: block;
}
.btn_serve {
  float: left;
  margin-top: 4px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>