使用ace作为脚本编辑器

zhangzengfei

2021-11-19 af1f5e1d049f669b3295e8f357c1be4f6a811b1c

 src/views/project/components/ProjectEdit.vue

@@ -2,7 +2,7 @@
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    width="550px"
    :close-on-click-modal="false"
    @close="close"
  >
@@ -10,31 +10,37 @@
      <el-tab-pane label="基础信息" name="base">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model.trim="form.name" autocomplete="off"></el-input>
            <el-input v-model.trim="form.name" :disabled="edit"></el-input>
          </el-form-item>
          <el-form-item label="项目地址" prop="srcUrl">
            <el-input v-model.trim="form.srcUrl" autocomplete="off"></el-input>
            <el-input v-model.trim="form.srcUrl"></el-input>
          </el-form-item>
          <el-form-item label="项目用户" prop="srcUser">
            <el-input v-model.trim="form.srcUser" autocomplete="off"></el-input>
            <el-input v-model.trim="form.srcUser"></el-input>
          </el-form-item>
          <el-form-item label="项目密码" prop="srcPassword">
            <el-input v-model.trim="form.srcPassword" autocomplete="off"></el-input>
            <el-input
              v-model.trim="form.srcPassword"
              autocomplete="off"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item label="项目描述" prop="desc">
            <el-input v-model.trim="form.desc" autocomplete="off"></el-input>
            <el-input v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="编译分支" prop="branch">
            <el-input v-model.trim="form.branch" autocomplete="off"></el-input>
            <el-input v-model.trim="form.branch" :disabled="edit"></el-input>
          </el-form-item>
          <el-form-item label="编译架构" prop="arch">
            <el-radio-group v-model="form.arch">
            <el-radio-group v-model="form.arch" :disabled="edit">
              <el-radio label="x86">X86</el-radio>
              <el-radio label="arm">ARM</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="项目类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="os">基础包</el-radio>
              <el-radio label="sys">系统包</el-radio>
              <el-radio label="app">应用包</el-radio>
              <el-radio label="algo">算法包</el-radio>
@@ -46,10 +52,28 @@
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="编译脚本" name="build">
        <textarea v-model="form.buildScript" cols="60" rows="10"></textarea>
        <!-- <textarea v-model="form.buildScript" cols="60" rows="10"></textarea> -->
        <code-editor
          v-if="activeName == 'build'"
          v-model="form.buildScript"
          lang="sh"
          theme="chrome"
          width="500"
          height="100"
          @init="editorInit"
        ></code-editor>
      </el-tab-pane>
      <el-tab-pane label="打包脚本" name="pack">
        <textarea v-model="form.packScript" cols="60" rows="10"></textarea>
        <!-- <textarea v-model="form.packScript" cols="60" rows="10"></textarea> -->
        <code-editor
          v-if="activeName == 'pack'"
          v-model="form.packScript"
          lang="sh"
          theme="chrome"
          width="500"
          height="100"
          @init="editorInit"
        ></code-editor>
      </el-tab-pane>
    </el-tabs>

@@ -61,59 +85,80 @@
</template>

<script>
import { doEdit } from '@/api/project'
import { doEdit } from "@/api/project";
import CodeEditor from "vue2-ace-editor";

export default {
  name: 'ProjectEdit',
  name: "ProjectEdit",
  components: {
    CodeEditor,
  },
  data() {
    return {
      activeName: 'base',
      activeName: "base",
      form: {
        title: '',
        author: '',
        packScript:
          "#!/bin/sh\n#打包开始会在项目下创建integrate-build的临时文件夹\n#打包脚本执行路径为项目下的integrate-build文件夹内\n#需复制上级目录的编译完成的目标文件到当前位置\n",
        buildScript: "#!/bin/sh\n",
      },
      rules: {
        title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
        title: [{ required: true, trigger: "blur", message: "请输入标题" }],
        author: [{ required: true, trigger: "blur", message: "请输入作者" }],
      },
      title: '',
      title: "",
      dialogFormVisible: false,
    }
      edit: false,
    };
  },
  created() { },
  mounted() {},
  methods: {
    showEdit(row) {
      this.activeName = "base";
      if (!row) {
        this.title = '添加'
        this.title = "添加";
        this.edit = false;
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
        this.edit = true;
        this.title = "编辑";
        this.form = Object.assign({}, row);
      }
      this.dialogFormVisible = true
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
      this.$emit('fetch-data')
      this.$refs["form"].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      // this.$emit("fetch-data");
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const { msg } = await doEdit(this.form)
          this.$baseMessage(msg, 'success')
          this.$refs['form'].resetFields()
          this.dialogFormVisible = false
          this.$emit('fetch-data')
          this.form = this.$options.data().form
          const rsp = await doEdit(this.form);
          if (rsp && rsp.success) {
            this.$baseMessage(rsp.msg, "success");
          }
          this.$refs["form"].resetFields();
          this.dialogFormVisible = false;
          this.$emit("fetch-data");
          this.form = this.$options.data().form;
        } else {
          return false
          return false;
        }
      })
      });
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    editorInit() {
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/sh");
      require("brace/theme/chrome");
    },
  },
}
};
</script>
<style scoped>
.el-radio {
  margin-right: 20 px;
}
</style>