update

src/components/Base/Dialog/index.vue

@@ -31,112 +31,112 @@
 </template>
 
 <script lang="ts">
-  import { ElForm } from 'element-ui/types/form'
-  import { Vue, Component, Prop, PropSync } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator'
 
-  @Component({ name: 'TfDialog', inheritAttrs: false })
-  export default class Dialog extends Vue {
-    @PropSync('visible', { type: Boolean }) dialogVisible!: boolean
-    @Prop({ type: String }) title!: string
-    @Prop({ type: Boolean }) loading!: boolean
-    @Prop({ type: Boolean }) disabled!: boolean
-    @Prop({ type: Boolean, default: true }) clear!: boolean
-    @Prop({ type: Boolean, default: true }) footer!: boolean
-    @Prop({ type: Boolean, default: true }) gutter!: boolean
+@Component({ name: 'TfDialog', inheritAttrs: false })
+export default class Dialog extends Vue {
+  @PropSync('visible', { type: Boolean }) dialogVisible!: boolean
+  @Prop({ type: String }) title!: string
+  @Prop({ type: Boolean }) loading!: boolean
+  @Prop({ type: Boolean }) disabled!: boolean
+  @Prop({ type: Boolean, default: true }) clear!: boolean
+  @Prop({ type: Boolean, default: true }) footer!: boolean
+  @Prop({ type: Boolean, default: true }) gutter!: boolean
 
-    get listeners() {
-      const { open, closed, submit, ...rest } = this.$listeners
-      return rest
-    }
+  get listeners() {
+    const { open, closed, submit, ...rest } = this.$listeners
+    return rest
+  }
 
-    onOpen() {
-      if (this.clear) {
-        const { clearValidate } = (this.$parent.$refs['form'] as ElForm) || {}
-        setTimeout(() => {
-          clearValidate && clearValidate()
-        }, 0)
-      }
-      this.$emit('open')
+  onOpen() {
+    if (this.clear) {
+      const { clearValidate } = (this.$parent.$refs['form'] as ElForm) || {}
+      setTimeout(() => {
+        clearValidate && clearValidate()
+      }, 0)
     }
+    this.$emit('open')
+  }
 
-    onClosed() {
-      if (this.clear) {
-        const { resetFields } = (this.$parent.$refs['form'] as ElForm) || {}
-        resetFields && resetFields()
-      }
-      this.$emit('closed')
+  onClosed() {
+    if (this.clear) {
+      const { resetFields } = (this.$parent.$refs['form'] as ElForm) || {}
+      resetFields && resetFields()
     }
-    updated() {
-      this.$nextTick(() => {
-        /**我也不知道为什么title会被传到html上 */
-        ;[...document.querySelectorAll('.dialog')].forEach((dialog) => {
-          dialog.removeAttribute('title')
-        })
+    this.$emit('closed')
+  }
+  updated() {
+    this.$nextTick(() => {
+      /**我也不知道为什么title会被传到html上 */
+      ;[...document.querySelectorAll('.dialog')].forEach((dialog) => {
+        dialog.removeAttribute('title')
       })
-    }
+    })
   }
+}
 </script>
 <style lang="scss" scoped>
-  .dialog {
-    font-size: $--font-size-base;
-    $radius: $--border-radius-base;
-    $font-color: $--color-white;
-    $bg-color: $--color-primary;
+.dialog {
+  font-size: $--font-size-base;
+  $radius: $--border-radius-base;
+  $font-color: $--color-white;
+  $bg-color: $--color-primary;
 
-    border-radius: $radius;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    >>> .el-dialog {
-      background-color: transparent;
-      max-width: 85vw;
-      margin-top: 0 !important;
-      .title {
-        font-size: $--font-size-medium;
-        color: $font-color;
-        font-weight: 500;
-      }
+  border-radius: $radius;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  >>> .el-dialog {
+    background-color: transparent;
+    max-width: 85vw;
+    margin-top: 0 !important;
+    .title {
+      font-size: $--font-size-medium;
+      color: $font-color;
+      font-weight: 500;
+    }
 
-      &__header {
-        background-color: $bg-color;
-        color: $font-color;
-        border-bottom-color: $bg-color;
-        height: 54px;
-        text-indent: 0;
-        padding: 0 $gutter-medium;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-top-left-radius: $radius;
-        border-top-right-radius: $radius;
-        &btn {
-          position: relative;
-          top: 0;
-          right: 0;
-          i.el-icon-close {
-            color: $font-color !important;
-            font-size: 1.2em;
-          }
+    &__header {
+      background-color: $bg-color;
+      color: $font-color;
+      border-bottom-color: $bg-color;
+      height: 54px;
+      text-indent: 0;
+      padding: 0 $gutter-medium;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-top-left-radius: $radius;
+      border-top-right-radius: $radius;
+      &btn {
+        position: relative;
+        top: 0;
+        right: 0;
+        i.el-icon-close {
+          color: $font-color !important;
+          font-size: 1.2em;
         }
       }
-      &__body {
-        background-color: #fff;
-      }
-      &__footer {
-        background-color: #fff;
-        border-bottom-left-radius: $radius;
-        border-bottom-right-radius: $radius;
-      }
-      .el-dialog__body {
-        padding: $gutter-medium;
-      }
     }
-    &.no-gutter {
-      >>> .el-dialog {
-        .el-dialog__body {
-          padding: 0;
-        }
+    &__body {
+      background-color: #fff;
+    }
+    &__footer {
+      background-color: #fff;
+      border-bottom-left-radius: $radius;
+      border-bottom-right-radius: $radius;
+    }
+    .el-dialog__body {
+      padding: $gutter-medium;
+    }
+  }
+  &.no-gutter {
+    >>> .el-dialog {
+      .el-dialog__body {
+        padding: 0;
       }
     }
   }
+}
 </style>

src/views/groupPageDataManagement/IndexManagement/IndexForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="676px" top="7vh">
+  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="676px" top="7vh" v-if="$attrs.visible">
     <el-row :gutter="15">
       <el-col>
         <el-form
@@ -11,7 +11,7 @@
         >
           <el-form-item
             v-for="{ name, label, type, required, options, onChange, disabled, ...rest } of formItems"
-            :style="setStyle(type)"
+            :style="{ width: '50%', float: 'left' }"
             :key="name"
             :required="required"
             :label="label"
@@ -52,7 +52,7 @@
               v-bind="rest"
             />
           </el-form-item>
-          <el-col :span="24" style="padding-right: 0">
+          <el-row>
             <el-form-item :key="'floatTips'" :label="'提示信息'" :prop="'floatTips'">
               <el-input
                 v-model="formData['floatTips']"
@@ -63,8 +63,8 @@
                 :rows="1"
               />
             </el-form-item>
-          </el-col>
-          <el-col :span="24" style="padding-right: 0">
+          </el-row>
+          <el-row>
             <el-form-item :key="'note'" :label="'指标说明'" :prop="'note'">
               <el-input
                 v-model="formData['note']"
@@ -75,7 +75,7 @@
                 :rows="3"
               />
             </el-form-item>
-          </el-col>
+          </el-row>
         </el-form>
       </el-col>
     </el-row>
@@ -85,9 +85,9 @@
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
-import { telAndMobileReg } from '@/utils/constant'
+import { IIndex } from '../commonAPI/common'
 
-const getDefaultValue = () => ({
+const getDefaultValue = (): Partial<IIndex> => ({
   dataGroup: undefined,
   stsDate: undefined,
   projectCode: undefined,
@@ -105,9 +105,8 @@ const getDefaultValue = () => ({
 @Component({ name: 'IndexForm' })
 export default class IndexForm extends Vue {
   @Prop({ type: Object, default: () => ({}) }) data!: object
-  @Prop({ type: Array, default: () => [] }) types!: []
   $refs!: { form: ElForm }
-  formData = {
+  formData: Partial<IIndex> = {
     ...getDefaultValue()
   }
 
@@ -119,13 +118,13 @@ export default class IndexForm extends Vue {
   get formItems() {
     return [
       { label: '分组', name: 'dataGroup' },
-      { label: '统计日期', name: 'stsDate', required: true },
+      { label: '统计日期', name: 'stsDate', type: 'date', required: true },
       { label: '项目编码', name: 'projectCode' },
       { label: '项目名称', name: 'projectName' },
       { label: '管理领域', name: 'mangeField' },
       { label: '指标分类', name: 'indexType' },
-      { label: '指标代码', name: 'indexCode', required: true, disabled: true },
-      { label: '指标名称', name: 'indexName', required: true, disabled: true },
+      { label: '指标代码', name: 'indexCode', required: true },
+      { label: '指标名称', name: 'indexName', required: true },
       { label: '指标值', name: 'indexValue', required: true },
       { label: '指标单位', name: 'unit' }
     ]
@@ -137,23 +136,7 @@ export default class IndexForm extends Vue {
     indexName: [{ required: true, message: '请输入指标名称' }],
     indexValue: [{ required: true, message: '请输入指标值' }]
   }
-  /** 没有查询全部类型参数的接口, 暂用分页接口 */
-  async getAllTypeParams(typeId: number) {
-    try {
-      //   const {
-      //     result: { records }
-      //   } = await deviceTypeParamPage({ typeId, current: 1, size: 9999 })
-      //   this.formData = {
-      //     ...this.formData,
-      //     param: records.length ? records.map((item) => item.targetName).join(', ') : '无'
-      //   }
-    } catch (error) {
-      console.log(error)
-    }
-  }
-  setStyle(type) {
-    return { width: '50%', float: 'left' }
-  }
+
   onSubmit() {
     this.$refs.form.validate((valid) => {
       if (valid) {
@@ -164,13 +147,13 @@ export default class IndexForm extends Vue {
   }
 
   @Watch('data', { immediate: true })
-  setDefaultData(val) {
-    this.formData = val.id
-      ? {
-          ...val
-        }
-      : { ...getDefaultValue() }
-    if (val.deviceType) this.getAllTypeParams(val.deviceType)
+  setDefaultData(val: IIndex) {
+    for (const key in val) {
+      if (val[key] == '/') {
+        val[key] = ''
+      }
+    }
+    this.formData = val.id ? { ...val } : { ...getDefaultValue() }
   }
 }
 </script>

src/views/groupPageDataManagement/IndexManagement/widget.vue

@@ -3,25 +3,25 @@
     <template v-slot:action>
       <ActionHeader
         :kplaceholder="'支持指标名称搜索'"
-        @search="onSearch"
+        :selected="selected"
         :actived="isActive"
         :loading="loading"
+        @search="onSearch"
         @add="onAdd"
       />
     </template>
-    <tf-table :columns="tableCols" :data="tableData" v-loading="loading.search">
+    <tf-table :columns="tableCols" :data="tableData" v-loading="loading.search" @selection-change="onSelectionChange">
       <template v-slot:operation="{ row }">
         <el-button type="text" style="padding: 0" @click="editor(row)">编辑</el-button>
         <el-button type="text" style="padding: 0" @click="remove(row)">删除</el-button>
       </template>
     </tf-table>
     <IndexForm
-      v-if="visible"
       :visible.sync="visible"
-      @submit="onSubmit"
       :loading="loading.add || loading.update"
       :data="current"
       :title="`${current.id ? '编辑' : '新增'}`"
+      @submit="onSubmit"
     />
   </tf-page>
 </template>
@@ -43,12 +43,16 @@ export default class IndexManagement extends Vue {
 
   isActive: boolean = false
 
-  loading: ILoading = { search: false, add: false, update: false, delete: true, import: false, export: false }
+  loading: ILoading = { search: false, add: false, update: false, delete: false, import: false, export: false }
 
   tableCols = IMTableColumns
 
   tableData: any = []
+
   current: any = {}
+
+  selected: any = []
+
   mounted() {
     this.isActive = true
   }
@@ -71,7 +75,14 @@ export default class IndexManagement extends Vue {
     this.visible = true
   }
   remove(row) {}
-  onSubmit() {}
+
+  onSubmit(data) {
+    console.log(data)
+  }
+
+  onSelectionChange(selections) {
+    this.selected = [...selections]
+  }
 }
 </script>
 

src/views/groupPageDataManagement/ProjectManagement/ProjectForm.vue

@@ -0,0 +1,167 @@
+<template>
+  <tf-dialog v-bind="$attrs" v-on="listeners" @submit="onSubmit" width="476px" top="7vh">
+    <el-row :gutter="15">
+      <el-col>
+        <el-form
+          class="form"
+          ref="form"
+          v-bind="{ labelWidth: 'auto', size: 'medium' }"
+          :model="formData"
+          :rules="rules"
+        >
+          <el-form-item
+            v-for="{ name, label, type, required, options, onChange, disabled, ...rest } of formItems"
+            :key="name"
+            :required="required"
+            :label="label"
+            :prop="name"
+          >
+            <el-date-picker
+              v-if="type === 'date'"
+              v-model="formData[name]"
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+              :disabled="disabled"
+              :placeholder="`请选择${label}`"
+              clearable
+              size="small"
+              v-bind="rest"
+            />
+            <el-select
+              v-else-if="type === 'select'"
+              v-model="formData[name]"
+              filterable
+              :placeholder="`请选择${label}`"
+              size="small"
+              clearable
+              v-bind="rest"
+              @change="onChange"
+              style="width: 100%"
+            >
+              <el-option v-for="item in options" :key="item.id" :label="item.deviceTypeName" :value="item.id" />
+            </el-select>
+            <el-input
+              v-else
+              v-model="formData[name]"
+              :type="type || 'text'"
+              :disabled="disabled"
+              :placeholder="name === 'no' ? '系统自动添加' : `请输入${label}`"
+              size="medium"
+              clearable
+              v-bind="rest"
+            />
+          </el-form-item>
+          <el-row :gutter="15">
+            <el-form-item :key="'l&t'" :label="'经纬度'" :prop="'l&t'">
+              <el-col :span="8">
+                <el-input
+                  v-model="formData['longitude']"
+                  :type="'text'"
+                  :placeholder="`请输入经度`"
+                  size="medium"
+                  clearable
+              /></el-col>
+              <el-col :span="8">
+                <el-input
+                  v-model="formData['latitude']"
+                  :type="'text'"
+                  :placeholder="`请输入纬度`"
+                  size="medium"
+                  clearable
+              /></el-col>
+              <el-col :span="8">
+                <el-button type="primary">图上选择</el-button>
+              </el-col>
+            </el-form-item>
+          </el-row>
+          <el-row :gutter="15">
+            <el-form-item :key="'range'" :label="'工程范围'" :prop="'range'">
+              <el-col :span="16">
+                <el-input
+                  v-model="formData['range']"
+                  :type="'text'"
+                  :placeholder="`请输入经度`"
+                  size="medium"
+                  clearable
+                />
+              </el-col>
+              <el-col :span="4">
+                <el-button type="primary">图上绘制</el-button>
+              </el-col>
+            </el-form-item>
+          </el-row>
+        </el-form>
+      </el-col>
+    </el-row>
+  </tf-dialog>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { IProject } from '../commonAPI/common'
+
+const getDefaultValue = (): Partial<IProject> => ({
+  code: undefined,
+  name: undefined,
+  levelname: undefined,
+  longitude: undefined,
+  latitude: undefined,
+  range: undefined
+})
+
+@Component({ name: 'ProjectForm' })
+export default class ProjectForm extends Vue {
+  @Prop({ type: Object, default: () => ({}) }) data!: object
+  $refs!: { form: ElForm }
+  formData: Partial<IProject> = {
+    ...getDefaultValue()
+  }
+
+  get listeners() {
+    const { submit, ...rest } = this.$listeners
+    return rest
+  }
+
+  get formItems() {
+    return [
+      { label: '工程编号', name: 'code', disabled: true },
+      { label: '工程名称', name: 'name', disabled: true },
+      { label: '工程类型', name: 'levelname' },
+      { label: '计划开始时间', name: 'planStart', type: 'date', style: 'width:100%' },
+      { label: '计划结束时间', name: 'planEnd', type: 'date', style: 'width:100%' }
+    ]
+  }
+
+  rules = {}
+
+  onSubmit() {
+    this.$refs.form.validate((valid) => {
+      if (valid) {
+        const { ...rest } = this.formData
+        this.$emit('submit', { ...rest })
+      }
+    })
+  }
+
+  @Watch('data', { immediate: true })
+  setDefaultData(val: IProject) {
+    for (const key in val) {
+      if (val[key] == '/') {
+        val[key] = ''
+      }
+    }
+    this.formData = val.id ? { ...val } : { ...getDefaultValue() }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-dialog__wrapper {
+  pointer-events: none;
+  overflow: hidden;
+  >>> .el-dialog {
+    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
+    pointer-events: auto;
+  }
+}
+</style>

src/views/groupPageDataManagement/ProjectManagement/widget.vue

@@ -5,8 +5,8 @@
         :kplaceholder="'支持工程名称搜索'"
         :onlySearch="true"
         :actived="isActive"
-        @search="onSearch"
         :loading="loading"
+        @search="onSearch"
       />
     </template>
     <tf-table :columns="tableCols" :data="tableData" v-loading="loading.search">
@@ -14,6 +14,15 @@
         <el-button type="text" style="padding: 0" @click="editor(row)">编辑</el-button>
       </template>
     </tf-table>
+    <ProjectForm
+      v-if="visible"
+      :visible.sync="visible"
+      :loading="loading.add || loading.update"
+      :data="current"
+      :title="`${current.id ? '编辑' : '新增'}`"
+      :modal="false"
+      @submit="onSubmit"
+    />
   </tf-page>
 </template>
 
@@ -23,12 +32,15 @@ import ActionHeader from '../components/ActionHeader.vue'
 import { PMTableColumns } from '../commonAPI/settings'
 import { ILoading } from '../commonAPI/common'
 import { getPbsListWithRange } from '../commonAPI/request'
+import ProjectForm from './ProjectForm.vue'
 //工程管理
 @Component({
   name: 'IndexManagement',
-  components: { ActionHeader }
+  components: { ActionHeader, ProjectForm }
 })
 export default class IndexManagement extends Vue {
+  visible: boolean = false
+
   isActive: boolean = false
 
   tableCols = PMTableColumns
@@ -37,6 +49,8 @@ export default class IndexManagement extends Vue {
 
   loading: ILoading = { search: false, add: false, update: false, delete: false, import: false, export: false }
 
+  current: any = {}
+
   get prjId() {
     return this.$store.getters['project/id'].projectId
   }
@@ -52,7 +66,11 @@ export default class IndexManagement extends Vue {
       this.loading.search = false
     })
   }
-  editor(row) {}
+  editor(row) {
+    this.current = { ...row }
+    this.visible = true
+  }
+  onSubmit() {}
 }
 </script>
 

src/views/groupPageDataManagement/commonAPI/common.ts

@@ -10,4 +10,30 @@ export interface ILoading {
     delete: boolean
     import: boolean
     export: boolean
+}
+
+export interface IIndex {
+    id?: number,
+    dataGroup: string,
+    stsDate: string,
+    projectCode: string,
+    projectName: string,
+    mangeField: string,
+    indexType: string,
+    indexCode: string,
+    indexName: string,
+    indexValue: string,
+    unit: string,
+    floatTips: string,
+    note: string
+}
+
+export interface IProject {
+    id?: number,
+    code: string,
+    name: string,
+    levelname: string,
+    longitude: string,
+    latitude: string,
+    range: string,
 }

src/views/groupPageDataManagement/components/ActionHeader.vue

@@ -20,7 +20,14 @@
       </el-form-item>
       <el-form-item style="position: absolute; right: 0">
         <el-button type="primary" size="small" @click="$emit('add')" icon="el-icon-plus"> 新增 </el-button>
-        <el-button type="danger" size="small" @click="$emit('del')" icon="el-icon-delete" :disabled="loading.delete">
+        <el-button
+          type="danger"
+          size="small"
+          @click="$emit('del')"
+          icon="el-icon-delete"
+          :loading="loading.delete"
+          :disabled="loading.delete || !selected.length"
+        >
           删除
         </el-button>
         <el-button type="primary" size="small" @click="$emit('import')" icon="el-icon-download"> 导入 </el-button>
@@ -40,6 +47,7 @@ export default class ActionHeader extends Vue {
   @Prop({ type: String, default: '' }) kplaceholder!: string
   @Prop({ type: Boolean, default: false }) onlySearch!: boolean
   @Prop({ type: Boolean, default: false }) actived!: boolean
+  @Prop({ type: Array, default: () => [] }) selected!: any
   @Watch('actived')
   onActived(active: boolean) {
     if (active) {