AutoCommit/src/views/autoCommit.html

281 lines
9.9 KiB
HTML
Raw Normal View History

2019-12-26 17:47:37 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Github自动提交commit工具</title>
<link href="../assets/styles/element-ui2.13.min.css" rel="stylesheet" />
<link href="../assets/styles/base.css" rel="stylesheet" />
<link href="../assets/styles/autoCommit.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<div class="form-title">Github自动提交commit工具</div>
<el-container>
<el-main>
<el-form ref="form" :model="form" :rules="rules" label-width="160px">
<el-form-item class="form_item" prop="itemSrc">
<label slot="label">
<el-tooltip class="item" content="要提交commit的仓库文件夹" placement="top-start">
<span>项目地址 :</span>
</el-tooltip>
</label>
2019-12-30 21:13:08 +08:00
<span @click="chooseItem">{{ form.itemSrc }}</span>
</el-input>
</el-form-item>
<el-form-item class="form_item" prop="fileName">
<label slot="label">
<el-tooltip class="item" content="默认写入commit内容的文件,位于项目的根目录,不存在会自动创建" placement="top-start">
<span>commit文件 :</span>
</el-tooltip>
</label>
<el-input class="input_form" v-model="form.fileName" @change="fileNameChange"></el-input>
</el-input>
</el-form-item>
<el-form-item class="form_item" prop="commitMsg">
<label slot="label">
<el-tooltip class="item" content="commit信息" placement="top-start">
<span>commit信息 :</span>
</el-tooltip>
</label>
<el-input class="input_form" v-model="form.commitMsg" @change="commitMsgChange"></el-input>
</el-input>
</el-form-item>
<el-form-item class="form_item" prop="commitNumber">
<label slot="label">
<el-tooltip class="item" content="时间范围内每个日期需要commit的次数" placement="top-start">
<span>commit次数 :</span>
</el-tooltip>
</label>
<el-input-number v-model="form.commitNumber" :min="1" :max="100" size="mini"></el-input-number>
</el-form-item>
<el-form-item v-for="(ele, index) in form.timeArr" :key="index" :prop="'timeArr.' + index + '.value'" :rules="{
required: true, message: '日期不能为空', trigger: 'blur'
}">
<label slot="label">
2019-12-30 21:13:08 +08:00
<!-- TODO: wiki一个日期只能选中一次 去重 sort排序 切割字符串 单独比较 -->
<el-tooltip class="item" content="要commit的时间范围,可多选" placement="top-start">
<span>commit日期范围{{index+1}} :</span>
</el-tooltip>
</label>
<el-date-picker v-model="ele.value" size="middle" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
<el-button @click.prevent="removeTime(index)" :disabled="index === 0">删除</el-button>
</el-form-item>
<el-form-item>
2019-12-30 21:13:08 +08:00
<el-button type="primary" @click="submitForm('form')" :disabled="runNow !== 1 && runNow!== 0">开始commit</el-button>
<el-button @click="addTimeRange">新增时间范围</el-button>
2019-12-30 21:13:08 +08:00
<el-button @click="reset" :disabled="runNow === 1">取消commit</el-button>
<el-button @click="clearLog" :disabled="showText.logStr !== ''">清空日志</el-button>
</el-form-item>
</el-form>
2019-12-30 21:13:08 +08:00
<div class="form-title2">日志和文档</div>
2019-12-27 17:05:55 +08:00
<el-main>
2019-12-30 21:13:08 +08:00
<div class="log_form_father">
<el-form label-width="160px">
<el-form-item label="插件运行日志 :">
<el-input @input="formatLog" type="textarea"
:autosize="{ minRows: 1, maxRows: 8}"
placeholder="无法输入 仅用于展示" v-model="showText.logStr" :disabled="runNow === 1 || runNow === 0">
</el-form-item>
<el-form-item label="开始commit的参数 :">
<el-input @input="watchParamsChange" type="textarea"
:autosize="{ minRows: 1, maxRows: 4}"
placeholder="无法输入 仅用于展示" v-model="showText.paramsStr" :disabled="showText.paramsStr === ''">
</el-form-item>
<el-form-item label="wiki文档 :">
<el-link href="https://element.eleme.io" type="primary" target="_blank">Readme</el-link>
<el-link href="https://element.eleme.io" type="primary" target="_blank">更新日志</el-link>
</el-form-item>
<div class="tip">觉得这个插件还不错的话, 请给我点个<el-link href="https://element.eleme.io" type="primary" target="_blank">Star⭐</el-link>吧~</div>
</div>
</el-form>
</el-input>
2019-12-27 17:05:55 +08:00
</el-main>
</el-main>
</el-container>
</div>
</div>
</body>
<script src="../assets/scripts/vue.min.js"></script>
<script src="../assets/scripts/element2.13.min.js"></script>
<script>
2019-12-30 21:13:08 +08:00
const vscode = acquireVsCodeApi()
new Vue({
el: '#app',
data() {
// 项目地址验证
const itemSrcCheck = (rule, value, callback) => {
if (value !== '点击选择要commit的项目文件夹') {
callback();
} else {
callback(new Error('请选择要commit的项目文件夹'));
}
}
return {
2019-12-30 21:13:08 +08:00
showText:{
oldParams: '', // 保存的参数
paramsStr: '', // commit参数
logArr: [], // 保存的日志
logStr: '', //
},
runNow: 0, // 0 初始化 1运行中 2运行结束 3取消运行
form: {
// itemSrc: '/Users/koro/work/web_my/testCommit',
itemSrc: '点击选择要commit的项目文件夹',
fileName: 'commit.md',
commitMsg: 'autoCommit',
timeArr: [
{
value: ''
}
],
commitNumber: 1,
},
rules: {
'itemSrc': [
{
validator: itemSrcCheck, // 项目地址
required: true,
message: '请选择要commit的项目文件夹'
}
],
'fileName': [
{
required: true,
message: '请选择要写入内容的文件'
}
],
'commitMsg': [
{
required: true,
message: '请填入要commit的内容'
}
],
'commitNumber': [
{
required: true
}
]
}
};
},
mounted() {
2019-12-30 21:13:08 +08:00
this.initListener();
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.runCommit()
} else {
return false;
2019-12-27 17:05:55 +08:00
}
});
2019-12-26 17:47:37 +08:00
},
// 开始commit
runCommit() {
let params = this.form
2019-12-30 21:13:08 +08:00
params.formatTime = this.mapTimeData()
this.runNow = 1
this.showText.paramsStr = JSON.stringify(params)
this.showText.oldParams = this.showText.paramsStr
// this.mockLog()
this.postMessage('commit', params);
2019-12-26 17:47:37 +08:00
},
// 发送消息到插件
2019-12-30 21:13:08 +08:00
postMessage(command, data) {
vscode.postMessage({
command,
data
});
},
// 注册
initListener() {
2019-12-30 21:13:08 +08:00
// TODO: 通信问题 接收不到
window.addEventListener('message', event => {
const { command, data } = event.data;
2019-12-30 21:13:08 +08:00
console.log('data',data)
console.log('event', event,command,data);
// console.log('登录成功 addEventListener', event);
// if (command === 'success') {
// // 登录成功
// }
});
},
// 重置: commit成功和中断commit
reset() {
2019-12-30 21:13:08 +08:00
// TODO: runNow 3 取消运行
this.runNow = 2;
this.showText.paramsStr = ''
this.showText.oldParams = ''
},
// 写html时用
mockLog(){
this.showText.logArr = [
'res 开始 undefined',
'res 结束',
'log 开始 [{"commit": "a6b5f3d","author": "OBKoro1 <1677593011@qq.com>","date": "2019-12-26 21:05:57 +0800","message": "init"}]',
'log 结束',
'commit内容 2019-12-27T08:00:00+08:000',
'总commit次数1'
]
let num = 0;
let timeId = setInterval(() => {
if(num< 100){
num++
this.showText.logArr.unshift(`一些文字${num}`)
this.formatLog()
}else{
this.reset()
clearInterval(timeId)
}
}, 1000);
},
clearLog(){
this.showText.logArr = []
this.showText.logStr = ''
},
formatLog(){
this.showText.logStr = this.showText.logArr.join(`\n`)
},
watchParamsChange(){
this.showText.paramsStr = this.showText.oldParams
},
// 删除时间
removeTime(index) {
this.form.timeArr.splice(index, 1)
},
// format 一下时间 少嵌套一层
mapTimeData() {
return this.form.timeArr.map(item => {
return item.value
})
},
2019-12-30 21:13:08 +08:00
chooseItem() {
this.postMessage('choose-item')
},
// 增加时间范围选择
addTimeRange() {
this.form.timeArr.push({
value: ''
});
},
fileNameChange(value) {
if (value === '') {
this.form.fileName = 'commit.md'
2019-12-27 16:02:37 +08:00
}
},
commitMsgChange(value) {
if (value === '') {
this.form.commitMsg = 'autoCommit'
}
},
}
}).$mount('#xpLogin');
</script>
</html>