webview 验证和日期,数据传参等

This commit is contained in:
obkoro1 2019-12-29 19:51:53 +08:00
parent 6facf81346
commit bca29dab30
3 changed files with 244 additions and 130 deletions

View File

@ -8,10 +8,15 @@
background-color: #272822; background-color: #272822;
} }
body > .el-container {
margin-bottom: 40px;
}
.form_item { .form_item {
font-size: 16px; font-size: 16px;
} }
.form_item .el-form-item__label{
.el-form-item__label{
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
} }
@ -23,8 +28,7 @@
text-align: center; text-align: center;
} }
body > .el-container { .input_form{
margin-bottom: 40px; width: 200px;
} }

View File

@ -2,7 +2,7 @@
* Author : OBKoro1 * Author : OBKoro1
* Date : 2019-12-26 13:49:02 * Date : 2019-12-26 13:49:02
* LastEditors : OBKoro1 * LastEditors : OBKoro1
* LastEditTime : 2019-12-26 20:04:51 * LastEditTime : 2019-12-29 19:01:20
* FilePath : /autoCommit/src/models/WebView.ts * FilePath : /autoCommit/src/models/WebView.ts
* Description : 创建webview * Description : 创建webview
* https://github.com/OBKoro1 * https://github.com/OBKoro1
@ -101,7 +101,7 @@ class WebView {
// webview消息回调 // webview消息回调
public handleMessage(message: webviewMsg) { public handleMessage(message: webviewMsg) {
const { command, data } = message; const { command, data } = message;
if (command === 'event') { if (command !== 'msg') {
this.MessageCallBack(message); this.MessageCallBack(message);
return; return;
} }

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -14,17 +15,67 @@
<div class="form-title">Github自动提交commit工具</div> <div class="form-title">Github自动提交commit工具</div>
<el-container> <el-container>
<el-main> <el-main>
<!-- TODO: tip --> <el-form ref="form" :model="form" :rules="rules" label-width="160px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item class="form_item" prop="itemSrc">
<el-form-item label="项目地址" class="form_item" prop="itemSrc"> <label slot="label">
<div>{{ form.itemSrc }}</div> <el-tooltip class="item" content="要提交commit的仓库文件夹" placement="top-start">
<span>项目地址 :</span>
</el-tooltip>
</label>
<span>{{ form.itemSrc }}</span>
</el-input>
</el-form-item> </el-form-item>
</el-form> <el-form-item class="form_item" prop="fileName">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <label slot="label">
<el-form-item label="commit次数" class="form_item" prop="commitNumber"> <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-input-number v-model="form.commitNumber" :min="1" :max="100" size="mini"></el-input-number>
</el-form-item> </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">
<!-- TODO: wiki一个日期只能选中一次 去重 -->
<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>
<el-button type="primary" @click="submitForm('form')" :disabled="runNow">开始commit</el-button>
<el-button @click="addTimeRange">新增时间范围</el-button>
<el-button @click="addTimeRange" :disabled="!runNow">取消commit</el-button>
</el-form-item>
</el-form> </el-form>
<el-main>
<!-- TODO: 日志和wiki链接 github链接 -->
<el-input type="textarea" placeholder="请输入内容" v-model="paramsStr" disabled>
</el-input>
</el-main>
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
@ -36,17 +87,50 @@
new Vue({ new Vue({
el: '#app', el: '#app',
data() { data() {
// 项目地址验证
const itemSrcCheck = (rule, value, callback) => {
if (value !== '点击选择要commit的项目文件夹') {
callback();
} else {
callback(new Error('请选择要commit的项目文件夹'));
}
}
return { return {
paramsStr: '', // commit参数
runNow: false, // 运行中
form: { form: {
// itemSrc: '/Users/koro/work/web_my/testCommit', // itemSrc: '/Users/koro/work/web_my/testCommit',
itemSrc: '点击选择要commit的项目文件夹', itemSrc: '点击选择要commit的项目文件夹',
fileName: 'commit.md',
commitMsg: 'autoCommit',
timeArr: [ timeArr: [
{
value: ''
}
], ],
commitNumber: 1, commitNumber: 1,
}, },
rules: { rules: {
itemSrc: [ 'itemSrc': [
{
validator: itemSrcCheck, // 项目地址
required: true,
message: '请选择要commit的项目文件夹'
}
],
'fileName': [
{
required: true,
message: '请选择要写入内容的文件'
}
],
'commitMsg': [
{
required: true,
message: '请填入要commit的内容'
}
],
'commitNumber': [
{ {
required: true required: true
} }
@ -58,37 +142,30 @@
// this.initListener(); // this.initListener();
}, },
methods: { methods: {
// 登录 submitForm(formName) {
login() { this.$refs[formName].validate((valid) => {
const { elUserName, elPassword } = this.$refs; if (valid) {
const { userName, password } = this.$data; this.runCommit()
const formData = { } else {
username: String(userName), return false;
password: String(password)
};
if (!userName) {
this.postMessage('用户名不能为空');
elUserName.focus();
return;
} }
if (!password) {
this.postMessage('密码不能为空');
elPassword.focus();
return;
}
this.postMessage('user-login-message', 'event', formData);
},
// 发送消息到插件
postMessage(text, command = 'alert', params) {
vscode.postMessage({
command,
text,
params
}); });
}, },
// 开始commit
runCommit() {
let params = this.form
params.format = this.mapTimeData()
this.runNow = true
this.paramsStr = JSON.stringify(params)
this.postMessage(params, 'commit');
},
// 发送消息到插件
postMessage(data, command) {
vscode.postMessage({
command,
data
});
},
// 注册 // 注册
initListener() { initListener() {
window.addEventListener('message', event => { window.addEventListener('message', event => {
@ -99,8 +176,41 @@
// 登录成功 // 登录成功
} }
}); });
},
// 重置: commit成功和中断commit
reset() {
this.runNow = false;
this.paramsStr = ''
},
// 删除时间
removeTime(index) {
this.form.timeArr.splice(index, 1)
},
// format 一下时间 少嵌套一层
mapTimeData() {
return this.form.timeArr.map(item => {
return item.value
})
},
// 增加时间范围选择
addTimeRange() {
this.form.timeArr.push({
value: ''
});
},
fileNameChange(value) {
if (value === '') {
this.form.fileName = 'commit.md'
} }
},
commitMsgChange(value) {
if (value === '') {
this.form.commitMsg = 'autoCommit'
}
},
} }
}).$mount('#xpLogin'); }).$mount('#xpLogin');
</script> </script>
</html> </html>