front / strategy-eigine-ui · Files

<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="600px"
    append-to-body
    top="10vh"
    custom-class="new_dialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <!-- <el-form-item label="指标编号" prop="postName">
                    <el-input v-model="form.postName" placeholder="请输入指标编号" :disabled='disabled' />
                </el-form-item> -->
      <el-form-item label="指标名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入指标名称"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="指标代码" prop="targetEncrypt">
        <el-input
          v-model="form.targetEncrypt"
          placeholder="请输入指标代码"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="指标种类" prop="type">
        <el-select
          v-model="form.type"
          placeholder="指标种类"
          clearable
          size="small"
          :disabled="disabled"
        >
          <el-option
            v-for="(item, index) in dict.type.index_mobile_type"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="对应数据源返回字段" prop="interfaceField">
        <el-input
          v-model="form.interfaceField"
          placeholder="请输入对应数据源返回字段"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="指标说明" prop="targetExplain">
        <el-input
          v-model="form.targetExplain"
          type="textarea"
          placeholder="请输入指标说明"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="指标一级分类" prop="targetOneName">
        <el-select
          v-model="form.targetOneName"
          placeholder="指标一级分类"
          clearable
          size="small"
          @change="oneChange"
          :disabled="disabled"
        >
          <el-option
            v-for="(item, index) in yiji"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指标二级分类" prop="targetTwoName">
        <el-select
          v-model="form.targetTwoName"
          placeholder="指标二级分类"
          clearable
          size="small"
          @change="twoChange"
          :disabled="disabled"
        >
          <el-option
            v-for="(item, index) in erji"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指标三级分类" prop="targetThreeName">
        <el-select
          v-model="form.targetThreeName"
          placeholder="指标三级分类"
          clearable
          size="small"
          :disabled="disabled"
        >
          <el-option
            v-for="(item, index) in sanji"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指标类型" prop="dictType">
        <el-select
          v-model="form.dictType"
          placeholder="指标类型"
          clearable
          size="small"
          :disabled="disabled"
        >
          <el-option
            v-for="(item, index) in dict.type.index_type_list"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指标参数值" prop="targetValue">
        <el-input
          v-model="form.targetValue"
          type="textarea"
          placeholder="请输入指标参数值"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="数据来源" prop="dataSource">
        <el-input
          v-model="form.dataSource"
          placeholder="请输入数据来源"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="接口名称" prop="dataInterface">
        <el-input
          v-model="form.dataInterface"
          placeholder="请输入接口名称"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="原始字段" prop="originalField">
        <el-input
          v-model="form.originalField"
          placeholder="请输入原始字段"
          :disabled="disabled"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  targetBaseSave,
  targetBaseEdit,
  targetOneList,
  targetTwoList,
  targetThreeList,
} from "@/api/postList/list";
export default {
  name: "indexMobile",
  dicts: ["index_mobile_type", "index_type_list"],
  data() {
    return {
      imageUrl: "",
      disabled: true,
      open: false,
      // 弹出层标题
      title: "",
      // 表单参数
      form: {},
      checkList: [],
      yiji: [],
      erji: [],
      sanji: [],
      id: "",
      // 表单校验
      rules: {
        name: [
          { required: true, message: "指标名称不能为空", trigger: "blur" },
        ],
        targetEncrypt: [
          { required: true, message: "指标代码不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "指标种类不能为空", trigger: "blur" },
        ],
        targetExplain: [
          { required: true, message: "指标说明不能为空", trigger: "blur" },
        ],
        targetOneName: [
          { required: true, message: "指标一级分类不能为空", trigger: "blur" },
        ],
        targetTwoName: [
          { required: true, message: "指标二级分类不能为空", trigger: "blur" },
        ],
        targetThreeName: [
          { required: true, message: "指标三级分类不能为空", trigger: "blur" },
        ],
        dictType: [
          { required: true, message: "指标类型不能为空", trigger: "blur" },
        ],
        targetValue: [
          { required: true, message: "指标参数值不能为空", trigger: "blur" },
        ],
        dataInterface: [
          { required: true, message: "数据来源不能为空", trigger: "blur" },
        ],
        interfaceField: [
          {
            required: true,
            message: "对应数据源返回字段不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.form = {};
    },
    add() {
      this.open = true;
      this.form = {};
      this.id = ''
      this.getTargetOneList();
    },
    edit(res) {
      this.open = true;
      this.form = res;
      this.id = res.id;
      this.getTargetOneList();
      let p = {
        id: this.form.targetOneName,
      };
      let t = {
        id: this.form.targetTwoName,
      };
      targetTwoList(p).then((response) => {
        if (response.code == 200) {
          this.erji = response.data;
        } else {
        }
      });
      targetThreeList(t).then((response) => {
        this.sanji = response.data;
      });
    },
    getTargetOneList() {
      targetOneList().then((response) => {
        this.yiji = response.data;
      });
    },
    oneChange(val) {
      var p = {
        id: val,
      };
      targetTwoList(p).then((response) => {
        if (response.code == 200) {
          this.erji = response.data;
        } else {
        }
      });
    },
    twoChange(val) {
      var p = {
        id: val,
      };
      targetThreeList(p).then((response) => {
        this.sanji = response.data;
      });
    },
    // getTargetTwoList() {

    // },
    // getTargetThreeList() {

    // },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        this.form.id = this.id;
        if (valid) {
          if (this.id) {
            targetBaseEdit(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit("getList");
            });
          } else {
            targetBaseSave(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit("getList");
            });
          }
        }
      });
    },
  },
};
</script>

<style>
.new_dialog {
  height: 80%;
  overflow: hidden;
  overflow-y: scroll;
}
</style>