auto-mini-program-tool/src/components/HelloWorld.vue

<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="webhook 地址" prop="webhook">
      <el-input v-model="ruleForm.webhook" disabled></el-input>
    </el-form-item>
    <el-form-item label="项目" prop="selected_project">
      <el-select v-model="ruleForm.selected_project" placeholder="项目">
        <el-option
          v-for="item in ruleForm.project"
          :label="item.label"
          :value="item.value"
          @click="changeProject(item.page,item.label)"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="页面" prop="selected_page">
      <el-select v-model="ruleForm.selected_page" placeholder="页面">
        <el-option
          v-for="item in ruleForm.page"
          :label="item.name"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="分支" prop="selected_branch">
      <el-select
        v-model="ruleForm.selected_branch"
        placeholder="分支"
        filterable
      >
        <el-option
          v-for="item in ruleForm.branch"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="环境" prop="selected_mode">
      <el-select v-model="ruleForm.selected_mode" placeholder="环境">
        <el-option
          v-for="item in ruleForm.mode"
          :label="item.label"
          :value="item.value"
          @click="clickMode(item.label)"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        :loading="loading"
        @click="submitForm('ruleForm')"
        >发送飞书</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      url:'192.168.80.253:7777',
      // url:'http://192.168.80.185:7777',
      loading: false,
      ruleForm: {
        webhook:
          "https://open.feishu.cn/open-apis/bot/v2/hook/a924b6a5-86ef-4c76-a7e4-eb42056f70cc",
        region: "",
        resource: "",
        desc: "",
        selected_project: "",
        selected_branch: "",
        selected_mode: "",
        selected_page: "",
        project_name: "",
        mode_name: "",
        page: [],
        mode: [
          {
            label: "正式",
            value: "PRODUCTION",
          },
          {
            label: "预发布",
            value: "PRE",
          },
          {
            label: "测试",
            value: "TEST",
          },
        ],
        branch: [],
        project: [
          {
            label: "票圈vlog",
            value: "vlog",
            page: [
              {
                name: "首页",
                value: "pages/category",
              },
              {
                name: "资源传输",
                value:
                  "package-clip-tool/resource-transport/resource-transport",
              },
            ],
          },
          {
            value: "video",
            label: "票圈video",
            page: [
              {
                name: "首页",
                value: "pages/category",
              },
              {
                name: "资源传输",
                value:
                  "package-clip-tool/resource-transport/resource-transport",
              },
            ],
          },
          {
            value: "shortVideo",
            label: "票圈短视频",
            page: [
              {
                name: "首页",
                value: "pages/category",
              },
              {
                name: "资源传输",
                value:
                  "package-clip-tool/resource-transport/resource-transport",
              },
            ],
          },
          {
            value: "longVideo",
            label: "票圈长视频",
            page: [
              {
                name: "首页",
                value: "pages/category",
              },
              {
                name: "资源传输",
                value:
                  "package-clip-tool/resource-transport/resource-transport",
              },
            ],
          },
          {
            value: "flashSound",
            label: "闪音卡点",
            page: [
              {
                name: "首页",
                value: "pages/post/post",
              },
            ],
          },
          {
            value: "gaoxiao",
            label: "智能剪辑",
            page: [
              {
                name: "首页",
                value: "pages/post/post",
              },
            ],
          },
          {
            value: "happyStar",
            label: "票圈剪辑",
            page: [
              {
                name: "首页",
                value: "pages/post/post",
              },
            ],
          },
        ],
      },
      rules: {
        webhook: [
          {
            required: true,
            message: "WebHook不能为空",
          },
        ],
        selected_project: [
          {
            required: true,
            message: "不能为空",
          },
        ],
        selected_page: [
          {
            required: true,
            message: "不能为空",
          },
        ],
        selected_mode: [
          {
            required: true,
            message: "不能为空",
          },
        ],
        selected_branch: [
          {
            required: true,
            message: "不能为空",
          },
        ],
      },
    };
  },
  mounted() {
    this.getBranchpage();
  },
  methods: {
    changeProject(item,val) {
      this.ruleForm.page = item;
      this.ruleForm.selected_page = item[0].value;
      this.ruleForm.project_name = val;
    },
    clickMode(val) {
      this.ruleForm.mode_name = val;
    },
    // 获取分支
    getBranchpage() {
      axios.get(this.url+"/getBranch").then((res) => {
        res = res.data;
        if (res.code == 0) {
          this.ruleForm.branch = res.data;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          axios
            .post(this.url+"/send", {
              project: this.ruleForm.selected_project,
              webhook: this.ruleForm.webhook,
              mode: this.ruleForm.selected_mode,
              page: this.ruleForm.selected_page,
              branch: this.ruleForm.selected_branch,
              project_name: this.ruleForm.project_name,
              mode_name: this.ruleForm.mode_name,
            })
            .then((res) => {
              res = res.data;
              if (res.code == 0) {
                alert("发送成功");
              } else {
                alert(res.msg);
              }
              this.loading = false;
            })
            .error(() => {
              alert("网络错误");
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>