fix
This commit is contained in:
X1627315083
@@ -1,41 +1,207 @@
|
||||
<template>
|
||||
<div class="createCloud">
|
||||
<div class="createCloud" ref="createCloud"></div>
|
||||
<a-modal
|
||||
class="createCloud_modal generalModel"
|
||||
v-model:visible="operationsModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.createCloud"
|
||||
width="50%"
|
||||
:height="'77rem'"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div>Cloud generation task</div>
|
||||
</div>
|
||||
{{ cloudList }}
|
||||
<div class="allUserPoeration_center admin_page">
|
||||
<div class="admin_state_item">
|
||||
<span>Build type <span>*</span></span>
|
||||
<a-select
|
||||
v-model:value="buildType"
|
||||
show-search
|
||||
allowClear
|
||||
style="width: 220px"
|
||||
placeholder="Please select"
|
||||
:options="cloudList"
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>Image upload</span>
|
||||
<input
|
||||
v-model="percentOff"
|
||||
placeholder="Please enter percentOff"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" >
|
||||
<span>Number of images</span>
|
||||
<input
|
||||
v-model="numberOfImages"
|
||||
placeholder="Please enter number"
|
||||
type="text"
|
||||
style="width: 220px"
|
||||
/>
|
||||
</div>
|
||||
<div class="admin_state_item" style="width: 100%;">
|
||||
<span style="margin: 0;">Generation time：19min</span>
|
||||
</div>
|
||||
<div class="admin_state_item" style="width: 100%;">
|
||||
<span style="margin: 0;">Cost credit：500</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allUserPoeration_btn admin_page">
|
||||
<div class="admin_search_item" @click="cancelDsign">
|
||||
Close
|
||||
</div>
|
||||
<div class="admin_search_item" @click="setOk">
|
||||
OK
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import { formatTime,isEmail } from "@/tool/util";
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
components: {
|
||||
},
|
||||
props:{
|
||||
cloudList:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
emits: ['searchHistoryList'],
|
||||
setup(props,{emit}) {
|
||||
let operations = reactive({
|
||||
operationsModal:false,
|
||||
loadingShow:false,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
let operationsData = reactive({
|
||||
buildType:'',
|
||||
commissionRate:'',
|
||||
numberOfImages:'',
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
let init = ()=>{
|
||||
operations.operationsModal = true
|
||||
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
let setAddData = ()=>{
|
||||
return {
|
||||
"percentOff": operationsData.percentOff,
|
||||
"commissionRate": operationsData.commissionRate,
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
let cancelDsign = ()=>{
|
||||
operationsData.percentOff=''
|
||||
operationsData.commissionRate=''
|
||||
operations.operationsModal = false
|
||||
}
|
||||
let setOk = ()=>{
|
||||
let data
|
||||
data = setAddData()
|
||||
Https.axiosPost(Https.httpUrls.createCoupon, data).then(
|
||||
(rv) => {
|
||||
if (rv) {
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
})
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
cancelDsign,
|
||||
init,
|
||||
focus,
|
||||
blur,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.createCloud{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
:deep(.createCloud_modal){
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.createCloud_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.allUserPoeration_btn{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 0;
|
||||
.admin_search_item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.allUserPoeration_center{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
> .admin_state_item{
|
||||
width: auto;
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> span{
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
:deep(> .ant-select > .ant-select-selector){
|
||||
border-radius: 1.6rem;
|
||||
}
|
||||
> input{
|
||||
border-radius: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,9 +18,21 @@
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
<div class="content">
|
||||
<tr v-for="(row, index) in contentList" :key="index">
|
||||
<td v-for="header in cloudTiltleList" :key="header.value">
|
||||
<span v-show="header.value != 'operation'">
|
||||
{{ row[header.value] }}
|
||||
</span>
|
||||
<span v-show="header.value == 'operation'" @click="downloadIamge(row)" style="cursor: pointer;">
|
||||
download
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <createCloud ref="createCloud"></createCloud> -->
|
||||
{{ generateList }}
|
||||
<createCloud ref="createCloud" :cloudList="generateList[workflowType]"></createCloud>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -92,19 +104,31 @@ export default defineComponent({
|
||||
},{
|
||||
name:'Task time',
|
||||
value:'taskTime',
|
||||
},{
|
||||
name:'Operation',
|
||||
value:'operation',
|
||||
},
|
||||
],
|
||||
] as any,
|
||||
contentList:[
|
||||
{ name: '张三', size: 28, upLoadedBy: '1', taskTime: '123' },
|
||||
{ name: '李四', size: 32, upLoadedBy: '2', taskTime: '321' },
|
||||
{ name: '王五', size: 25, upLoadedBy: '3', taskTime: '222' }
|
||||
] as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
createCloud,
|
||||
})
|
||||
const createClound = ()=>{
|
||||
dataDom.createCloud.init()
|
||||
}
|
||||
const downloadIamge = (item:any)=>{
|
||||
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
createClound,
|
||||
downloadIamge,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -163,8 +187,28 @@ export default defineComponent({
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-top: 2.5rem;
|
||||
> .content tr , > .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
> .title{
|
||||
|
||||
background: #F7F7F7;
|
||||
> .titleItem{
|
||||
line-height: 4.6rem;
|
||||
font-size: 2rem;
|
||||
color: #666666;
|
||||
width: calc(100% / 4);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.content > tr{
|
||||
> td{
|
||||
text-align: center;
|
||||
width: calc(100% / 4);
|
||||
line-height: 4.6rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<i :class="item.icon"></i>
|
||||
<span v-show="isUnfold">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="navList list exist" @click="setNav('yun', $event)">
|
||||
<div class="navList list exist" style="margin-top: auto;" @click="setNav('yun', $event)">
|
||||
<i class="fi fi-rr-cloud-upload-alt"></i>
|
||||
<span v-show="isUnfold">云生成</span>
|
||||
</div>
|
||||
@@ -109,6 +109,8 @@ export default defineComponent({
|
||||
transition: all .3s;
|
||||
width: 7rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
width: 25rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user