倒计时项目

src/api/ncs_countdown_config.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+
+export function update(id, params) {
+    return request({
+        url: `/ncs/countdown/${id}`,
+        method: 'put',
+        data: params,
+        headers: { 'Content-Type': 'application/json' }
+    })
+}
+
+export function getConfigByPartId(partId) {
+    return request({
+        url: `/ncs/countdown/${partId}`,
+        method: 'GET'
+    })
+}

src/router/index.js

@@ -530,6 +530,19 @@ export const partRoutes = [
     ]
   },
   {
+    path: '/countdown-config',
+    component: Layout,
+    redirect: '/ncs-countdown-config/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/ncs-countdown-config/index'),
+        name: 'countdownConfig',
+        meta: { title: i18n.t('tab.functionRoleMapping'), icon: 'function', noCache: true }
+      }
+    ]
+  },
+  {
     path: '/interaction-chain',
     component: Layout,
     redirect: '/interaction-chain/index',

src/views/ncs-countdown-config/index.vue

@@ -0,0 +1,153 @@
+<template>
+    <div >
+    <el-card style="margin: 15px" :style="{height: mainHeight +'px'}">
+        <el-form ref="editform"  label-width="140px" :model="model">
+            <fieldset>
+                <legend>倒计时项目</legend>
+                <el-tag
+                        :key="tag"
+                        v-for="tag in model.countdown_items"
+                        closable
+                        :disable-transitions="false"
+                        @close="handleClose(tag)">
+                    {{tag}}
+                </el-tag>
+                <el-input
+                        class="input-new-tag"
+                        v-if="inputVisible"
+                        v-model="inputValue"
+                        ref="saveTagInput"
+                        size="small"
+                        @keyup.enter.native="handleInputConfirm"
+                        @blur="handleInputConfirm"
+                >
+                </el-input>
+                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新项目</el-button>
+            </fieldset>
+
+            <fieldset class="margin-top-sm">
+                <legend>倒计时时间项</legend>
+                <el-tag
+                        :key="tag"
+                        v-for="tag in model.countdown_times"
+                        closable
+                        :disable-transitions="false"
+                        @close="handleClose(tag.timeDisplay)">
+                    {{tag.timeDisplay}}
+                </el-tag>
+
+                <el-form :inline="true" :model="formInline" class="demo-form-inline margin-top-sm"  >
+                    <el-form-item >
+                        <el-input v-model="formInline.hour" placeholder="小时"><span slot="append">时</span></el-input>
+                    </el-form-item>
+                    <el-form-item >
+                        <el-input v-model="formInline.minute" placeholder="分钟"><span slot="append">分</span></el-input>
+                    </el-form-item>
+                    <el-form-item >
+                        <el-input v-model="formInline.second" placeholder="秒"><span slot="append">秒</span></el-input>
+                    </el-form-item>
+                    <el-form-item >
+                        <el-input v-model="formInline.second" placeholder="秒"><span slot="append">秒</span></el-input>
+                    </el-form-item>
+                    <el-form-item >
+                        <el-input v-model="formInline.second" placeholder="秒"><span slot="append">秒</span></el-input>
+                    </el-form-item>
+                    <el-form-item >
+                        <el-input v-model="formInline.second" placeholder="秒"><span slot="append">秒</span></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="addTimeItem">添加时间项</el-button>
+                    </el-form-item>
+                </el-form>
+
+            </fieldset>
+            <el-form-item align="center" class="margin-top-sm">
+                <el-button type="success" @click="onSubmit">{{ this.$t('partInfo.saveSettings') }}</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+
+    </div>
+
+</template>
+
+<script>
+    import * as API_CountdownConfig from '@/api/ncs_countdown_config'
+    export default {
+        name: "index",
+        computed: {
+            mainHeight() {
+                return this.mainAreaHeight - 30
+            }
+        },
+        data(){
+            return{
+                model:{},
+                inputVisible: false,
+                inputValue: '',
+                formInline:{}
+            }
+        },
+        mounted(){
+            this.getCountDownByPartId()
+        },
+        methods:{
+            handleClose(tag) {
+                this.model.countdown_items.splice(this.model.countdown_items.indexOf(tag), 1);
+            },
+
+            showInput() {
+                this.inputVisible = true;
+                this.$nextTick(_ => {
+                    this.$refs.saveTagInput.$refs.input.focus();
+                });
+            },
+
+            handleInputConfirm() {
+                let inputValue = this.inputValue;
+                if (inputValue) {
+                    this.model.countdown_items.push(inputValue);
+                }
+                this.inputVisible = false;
+                this.inputValue = '';
+            },
+            getCountDownByPartId(){
+                API_CountdownConfig.getConfigByPartId(this.$store.getters.partId).then(res=>{
+                    const {countdown_items,countdown_times}=res
+                    this.model={...res,countdown_items:JSON.parse(countdown_items),countdown_times:JSON.parse(countdown_times)}
+                })
+            }
+        }
+
+    }
+
+</script>
+
+<style scoped>
+    .el-tag + .el-tag {
+        margin-left: 10px;
+    }
+    .button-new-tag {
+        margin-left: 10px;
+        height: 32px;
+        line-height: 30px;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    .input-new-tag {
+        width: 90px;
+        margin-left: 10px;
+        vertical-align: bottom;
+    }
+    fieldset {
+        border-style: solid;
+        border-color: #DCDFE6;
+        border-width: 1px;
+    }
+    .margin-top-sm{
+        margin-top: 20px;
+    }
+    /deep/ .el-input-group{
+        width: 60%;
+    }
+</style>