自定义排序模板

pages/aps/aps/addTemp.vue

 <template>
   <div class="parameter">
-    <Form ref="form" label-position="top" :model="entity" :rules="rules">
-      <Row :gutter="24">
-        <Col span="24" style="height:80px;">
-          <FormItem label="模板名称" prop="tempName">
-            <Input v-model="entity.tempName"></Input>
-          </FormItem>
-        </Col>
-        <Col span="24" style="height:60px;">
-          <FormItem label="模板描述">{{entity.tempInfo}}</FormItem>
-        </Col>
-        <Col span="24">
-          <FormItem label="排序规则"></FormItem>
-        </Col>
-      </Row>
-    </Form>
-    <div>
-      <div
-        class="listFather"
-        v-for="(item,index) in tempDataList"
-        v-dragging="{ item: item, list: tempDataList, group: 'item'}"
-        :key="item.name"
-        title="拖动上下移动"
-      >
-        <div>
-          <Icon type="md-move" />
-          {{index+1}}.{{item.name}}
-        </div>
+    <div v-if="load" style="width:100px;margin:0 auto;padding-top:60px;">
+      <Spin size="large"></Spin>
+    </div>
+    <div v-show="!load">
+      <Form ref="form" label-position="top" :model="entity" :rules="rules">
+        <Row :gutter="24">
+          <Col span="24" style="height:80px;">
+            <FormItem label="模板名称" prop="tempName">
+              <Input v-model="entity.tempName"></Input>
+            </FormItem>
+          </Col>
+          <Col span="24" style="height:60px;">
+            <FormItem label="模板描述">{{entity.tempInfo}}</FormItem>
+          </Col>
+          <Col span="24">
+            <FormItem label="排序规则"></FormItem>
+          </Col>
+        </Row>
+      </Form>
+      <div>
         <div
-          class="listChildren"
-          v-for="(item1,index1) in item.sons"
-          v-dragging="{ item: item1, list: item.sons, group: 'item1' }"
-          :key="index1"
+          class="listFather"
+          v-for="(item,index) in tempDataList"
+          v-dragging="{ item: item, list: tempDataList, group: 'item'}"
+          :key="item.name"
+          title="拖动上下移动"
         >
           <div>
             <Icon type="md-move" />
-            {{index1+1}}.{{item1.name}}
+            {{index+1}}.{{item.name}}
+          </div>
+          <div
+            class="listChildren"
+            v-for="(item1,index1) in item.sons"
+            v-dragging="{ item: item1, list: item.sons, group: 'item1' }"
+            :key="index1"
+          >
+            <div>
+              <Icon type="md-move" />
+              {{index1+1}}.{{item1.name}}
+            </div>
           </div>
         </div>
       </div>
+      <Row>
+        <Col span="24" style="text-align:right;height:60px;line-height:60px">
+          <Button type="primary" @click="handleSubmit">确定</Button>
+          <Button @click="handleClose" class="ml20">取消</Button>
+        </Col>
+      </Row>
     </div>
-    <Row>
-      <Col span="24" style="text-align:right;height:60px;line-height:60px">
-        <Button type="primary" @click="handleSubmit">确定</Button>
-        <Button @click="handleClose" class="ml20">取消</Button>
-      </Col>
-    </Row>
   </div>
 </template>
 <script>
@@ -64,7 +69,8 @@ export default {
       listTempShort: [],
       rules: {
         tempName: [{ required: true, message: "必填", trigger: "blur" }]
-      }
+      },
+      load: true
     };
   },
   props: {},
@@ -109,10 +115,10 @@ export default {
           tempList = r.result.templateList;
           this.tempDataList = tempList;
           this.entity.id = r.result.id;
-          this.entity.tempName = '';
+          this.entity.tempName = "";
           //this.entity.tempName = r.result.templateName;
           this.outInfo(tempList);
-          this.$emit("changeStatu",r.result.id);
+          this.$emit("changeStatu", r.result.id);
         }
       });
     },
@@ -135,6 +141,7 @@ export default {
           this.tempInfo += data.name.substr(0, data.name.length - 2) + "-->";
         }
       });
+      this.load = false;
       this.tempInfo = this.tempInfo.substring(0, this.tempInfo.length - 3);
       this.entity.tempInfo = this.tempInfo;
     },
@@ -157,9 +164,9 @@ export default {
                   name: this.entity.tempName,
                   info: this.entity.tempInfo
                 };
-                this.$emit("on-ok",paramsData);
+                this.$emit("on-ok", paramsData);
                 this.$emit("on-close");
-                this.$emit("changeStatu",0);
+                this.$emit("changeStatu", 0);
               } else {
                 this.$Message.error("新增失败");
                 this.$emit("on-close");

pages/aps/aps/temp.vue

@@ -40,19 +40,21 @@ export default {
           key: "name",
           title: "模板名称",
           align: "left",
-           render: (h, params) => {
+          render: (h, params) => {
             return h(
-              'Tooltip',
+              "Tooltip",
               {
                 props: {
-                  content: params.row.name+"：时间节点-->批量工时-->工序数量-->生产关重-->紧急程度-->生产类型【批产-->研制-->工装-->协外】",
-                  placement: 'left-start',
-                  transfer:'true',
-                  maxWidth:'800'
-                },
+                  content:
+                    params.row.name +
+                    "：时间节点-->批量工时-->工序数量-->生产关重-->紧急程度-->生产类型【批产-->研制-->工装-->协外】",
+                  placement: "left-start",
+                  transfer: "true",
+                  maxWidth: "800"
+                }
               },
               params.row.name
-            )
+            );
           }
         },
         {
@@ -90,7 +92,9 @@ export default {
   mounted() {},
   methods: {
     addTempModal() {
-      this.add = () => import("./addTemp");
+      if (this.add == null) {
+        this.add = () => import("./addTemp");
+      }
     },
     handleSubmit() {
       this.$refs.form.validate(valid => {
@@ -117,14 +121,13 @@ export default {
     },
     addData(obj) {
       //this.data.splice(0, 0,obj);
-      this.data.push(obj)
+      this.data.push(obj);
     },
     cancel() {
       this.add = null;
     },
-    changeStatu(val)
-    {
-      this.$emit("changeStatu",val)
+    changeStatu(val) {
+      this.$emit("changeStatu", val);
     },
     l(key) {
       let vkey = "mes_op_task_plan_simulate" + "." + key;