Skip to content

D
DA-Platform

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit f904870f by 李严凡
Options

lyf releaseTask1

parent db7ea350
Showing with 333 additions and 152 deletions
DAPlatform-front/src/components/ReleaseTask.vue
......@@ -2,74 +2,200 @@
<div id="mission">
<div class="taskhall-container">
<el-container >
<el-main >
<el-main>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
<el-form-item>
<el-input v-model="taskName" @input="change($event)" placeholder="输入任务名称" style="width: 200px"></el-input>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">创建任务</el-button>
<el-button @click="addDomain">添加分片</el-button>
</el-form-item>
<el-form-item>
<!-- 采用手风琴实现折叠-->
<el-collapse v-model="activeName" accordion>
<el-form-item v-for="(domain, index) in dynamicValidateForm.domains"
:key="domain.key"
:prop="'domains.' + index + '.value'">
<el-collapse-item
:title="'任务分片'+(++index)"
:name="index" style="border-bottom: 1px solid;border-bottom-color:white;font-size: 14px">
<!-- 上传图片-->
<el-row :gutter="20" >
<el-col span="8">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="7"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-select v-model="domain.value" placeholder="请选择" style="margin-top: 30px" >
<el-option
v-for="item in domain.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col span="8">
<el-input type="textarea" :row="5" placeholder="请输入分片描述" @input="change($event)" v-model="domain.textarea" style="margin-bottom: 10px;" maxlength="50" show-word-limit="50">
</el-input>
<el-select v-model="domain.pvalue" placeholder="模板选择" >
<el-option
v-for="i in domain.piecesOptions"
:key="i.pvalue"
:label="i.plabel"
:value="i.pvalue">
</el-option>
</el-select>
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
</el-collapse-item>
<!-- 使用选项卡添加不同分片-->
<el-tabs v-model="cardName" type="border-card" @tab-click="handleClick" >
<el-tab-pane label="文本分片" name="first">
<el-row :gutter="20" style="margin-bottom: 15px">
<el-col span="2"><el-button @click="addDomain(1)" type="primary" plain>添加文本分片</el-button></el-col>
</el-row>
<el-row :gutter="20">
<el-form-item>
<!-- 采用手风琴实现折叠-->
<el-collapse v-model="activeName" accordion>
<el-form-item v-for="(domain, index) in dynamicValidateForm.domains"
:key="domain.key"
:prop="'domains.' + index + '.value'">
<el-collapse-item
:title="'文本任务分片'+(++index)"
:name="index" style="border-bottom: 1px solid;border-bottom-color:white;font-size: 14px">
<!-- 上传图片-->
<el-row :gutter="20" >
<el-col span="8">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="7"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary" >点击上传</el-button>
</el-upload>
</el-col>
<el-col span="6">
<el-select v-model="domain.pvalue" placeholder="模板选择" >
<el-option
v-for="i in domain.piecesOptions"
:key="i.pvalue"
:label="i.plabel"
:value="i.pvalue">
</el-option>
<el-option>
<el-button type="text" @click="dialogFormVisible = true">自定义模板</el-button>
</el-option>
</el-select>
<!-- 创建文本模板-->
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
</el-collapse-item>
</el-form-item>
</el-collapse>
</el-form-item>
</el-row>
</el-tab-pane>
<el-tab-pane label="图像分片" name="second">
<el-row :gutter="20" style="margin-bottom: 15px">
<el-col span="2"><el-button @click="addDomain(2)" type="primary" plain>添加图像分片</el-button></el-col>
</el-row>
<el-row :gutter="20">
<el-form-item>
<!-- 采用手风琴实现折叠-->
<el-collapse v-model="activeName" accordion>
<el-form-item v-for="(domain, index) in dynamicValidateForm.pictureDomains"
:key="domain.key"
:prop="'domains.' + index + '.value'">
<el-collapse-item
:title="'图片任务分片'+(++index)"
:name="index" style="border-bottom: 1px solid;border-bottom-color:white;font-size: 14px">
<!-- 上传图片-->
<el-row :gutter="20" >
<el-col span="6">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="7"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-col>
<el-col span="10">
<el-input type="textarea" :row="6" placeholder="请输入分片描述" @input="change($event)" v-model="domain.textarea" style="margin-bottom: 10px;height:40px" maxlength="150" show-word-limit="150">
</el-input>
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
</el-collapse-item>
</el-form-item>
</el-collapse>
</el-form-item>
</el-row>
</el-tab-pane>
<el-tab-pane label="图层分片" name="third">
<el-row :gutter="20" style="margin-bottom: 15px">
<el-col span="2"><el-button @click="addDomain(3)" type="primary" plain>添加图层分片</el-button></el-col>
</el-row>
<el-row :gutter="20">
<el-form-item>
<!-- 采用手风琴实现折叠-->
<el-collapse v-model="activeName" accordion>
<el-form-item v-for="(domain, index) in dynamicValidateForm.layerDoamins"
:key="domain.key"
:prop="'domains.' + index + '.value'">
<el-collapse-item
:title="'图层任务分片'+(++index)"
:name="index" style="border-bottom: 1px solid;border-bottom-color:white;font-size: 14px;">
<!-- 上传图片-->
<el-row :gutter="20" >
<el-col span="6">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="7"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-col>
<el-col span="10">
<el-input type="textarea" :row="6" placeholder="请输入分片描述" @input="change($event)" v-model="domain.textarea" style="margin-bottom: 10px;height:40px" maxlength="150" show-word-limit="150">
</el-input>
</el-col>
<el-col span="2" offset="2">
<el-button type="primary" plain @click.prevent="removeDomain(domain)">删除分片</el-button>
</el-col>
</el-row>
</el-collapse-item>
</el-form-item>
</el-collapse>
</el-form-item>
</el-row>
</el-tab-pane>
</el-tabs>
<el-row :gutter="20">
<el-col offset="17" span="7">
<el-form-item style="margin-top: 20px">
<el-input v-model="taskName" @input="change($event)" placeholder="输入任务名称" style="width: 200px"></el-input>
<el-button type="primary" @click="submitForm('dynamicValidateForm')" style="margin-left: 15px">创建任务</el-button>
</el-form-item>
</el-collapse>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-main>
<el-dialog title="自定义模板" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="模板名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<!-- 树状结构-->
<div class="custom-tree-container">
<div class="block">
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
</div>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="rePage">取 消</el-button>
<el-button type="primary" @click="rePage">确 定</el-button>
</div>
</el-dialog>
</el-main>
</el-container>
</div>
</div>
</template>
<script>
//export default {
// }
......@@ -104,7 +230,7 @@
/* border: solid; */
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.el-collapse-item,.el-collapse{
border-bottom:1px solid;
......@@ -118,22 +244,70 @@
margin-right: auto;
margin-top: 0px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
<script>
let id = 100;
export default {
data() {
const data = [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}];
return {
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px',
dynamicValidateForm: {
//domains--文本信息
domains: [{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
......@@ -145,16 +319,8 @@
plabel: '模板3'
}],
pvalue:'',
createMode:false
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
......@@ -166,16 +332,8 @@
plabel: '模板3'
}],
pvalue:'',
createMode:false
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
......@@ -187,51 +345,28 @@
plabel: '模板3'
}],
pvalue:'',
createMode:false
}],
pictureDomains:[{
textarea:'',
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
textarea:'',
},{
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
textarea:'',
}],
layerDoamins:[{
textarea:'',
},{
textarea:'',
},{
textarea:'',
}],
},
cardName : 'first',
createModeValue:'-1',
createModeLable:'自定义模板',
data: JSON.parse(JSON.stringify(data)),
data: JSON.parse(JSON.stringify(data)),
};
},
methods: {
......@@ -254,36 +389,82 @@
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
textarea: '',
options: [{
value: '1',
label: '文本分片'
}, {
value: '2',
label: '图像分片'
}],
value:'1',
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
key: Date.now()
});
addDomain(ptype) {
//添加文字分片
if(ptype == 1){
this.dynamicValidateForm.domains.push({
piecesOptions: [{
pvalue: '1',
plabel: '模板1'
}, {
pvalue: '2',
plabel: '模板2'
}, {
pvalue: '3',
plabel: '模板3'
}],
pvalue:'',
createMode:'',
key: Date.now()
});
}
//添加图像分片
else if(ptype == 2){
this.dynamicValidateForm.pictureDomains.push({
textarea:'',
key: Date.now()
});
}
else if(ptype == 3){
this.dynamicValidateForm.layerDoamins.push({
textarea:'',
key: Date.now()
});
}
},
change(e){
this.$forceUpdate();
},
handleClick(tab, event) {
console.log(tab, event);
},
createModle(d){
alert('111');
},
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Add</el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
},
rePage(){
// alert("111");
dialogFormVisible :false;
location.reload();
}
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment