DSDSWeb/src/views/dataTransfer/voyageReg.vue

<template>
  <div id="" class="page-body">
    <div class="page-header">
      <h1 class="page-title">航次数据汇交</h1>
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name: 'VoyageReg'}">数据汇交</el-breadcrumb-item>
        <el-breadcrumb-item>航次数据汇交</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="filter-container">
      <div class="checkBtn">
        <el-button type="primary" size="medium" @click="handleAdd">航次数据录入</el-button>
      </div>
    </div>
    <el-table ref="tableData" v-loading="loading" stripe border :data="tableData" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="#" width="50"/>
      <el-table-column prop="voyage_name" label="航次名称" />
      <el-table-column prop="ship_name" label="科考船舶" />
      <el-table-column prop="voyage_start_date" label="离港日期" />
      <el-table-column prop="voyage_end_date" label="返港日期" />
      <el-table-column prop="voyage_officer" label="首席" />
      <el-table-column prop="member_total" label="参航人数" />
      <el-table-column prop="funding_org" label="资助机构" />
      <el-table-column prop="funding_code" label="资助编号" />
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top-end">
            <el-button id="mod" size="mini" type="warning" class="el-icon-edit" @click="handleEdit(scope.row)" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
            <el-button id="del" size="mini" type="danger" class="el-icon-delete" @click="handleDelete(scope.row)" style="margin-left: 0%;" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination
        background
        :page-sizes="[10, 20, 30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--    新增/编辑弹窗-->
    <el-dialog :title="`${title}航次信息`" :visible.sync="open" :before-close="cancel" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="航次名称" prop="voyage_name">
              <el-input v-model="form.voyage_name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资助编号" prop="funding_code">
              <el-input v-model="form.funding_code" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="科考船舶" prop="ship_name">
              <el-select v-model="form.ship_name" style="width: 100%">
                <el-option
                  v-for="(item, index) in shipOptions"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="涉密航次" prop="serect_status">
              <el-select v-model="form.serect_status" style="width: 100%">
                <el-option
                  v-for="(item, index) in secretOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="离岗日期" prop="start_date">
              <el-date-picker
                style="width: 100%"
                v-model="form.start_date"
                type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="返岗日期" prop="end_date">
              <el-date-picker
                style="width: 100%"
                v-model="form.end_date"
                type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="航次资助机构">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags1"
                closable
                :disable-transitions="false"
                @close="handleClose(1, tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible1"
                v-model="inputValue1"
                ref="saveTagInput1"
                size="small"
                @keyup.enter.native="handleInputConfirm(1)"
                @blur="handleInputConfirm(1)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(1)">+ 添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="航次首席" prop="voyage_officer">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags2"
                closable
                :disable-transitions="false"
                @close="handleClose(2, tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible2"
                v-model="inputValue2"
                ref="saveTagInput2"
                size="small"
                @keyup.enter.native="handleInputConfirm(2)"
                @blur="handleInputConfirm(2)"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(2)">+ 添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述信息" prop="voyage_remark">
              <el-input type="textarea" :rows="3" v-model="form.voyage_remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { voyageRegList, voyageRegEdit, voyageRegDelete } from '@/api/dataTransfer'
import { time } from '@/utils/validate'

export default {
  name: 'VoyageReg',
  data() {
    return {
      loading: false,
      // 分页请求参数
      params: {
        start: 0,
        limit: 10,
        group: 10
      },
      pageNum: 1,
      // 列表数据
      tableData: [],
      total: 0,
      // 新增和编辑表单参数
      open: false,
      title: '新增',
      form: {
        voyage_name: '',
        ship_name: '',
        serect_status: '',
        start_date: '',
        end_date: '',
        voyage_officer_array: [],
        funding_org_array: [],
        funding_code: '',
        voyage_remark: '',
        voyage_officer: '',
        funding_org: '',
        voyage_start_date: '',
        voyage_end_date: ''
      },
      rules: {
        voyage_name: [
          { required: true, message: '此处为必填项', trigger: 'blur' }
        ],
        ship_name: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ],
        start_date: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ],
        end_date: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ],
        voyage_officer: [
          { required: true, message: '此处为必填项', trigger: 'change' }
        ]
      },
      shipOptions: ['探索一号', '探索二号'],
      secretOptions: [
        {
          label: '是',
          value: 'Active'
        },
        {
          label: '否',
          value: 'InActive'
        }
      ],
      inputVisible1: false,
      dynamicTags1: [],
      inputValue1: '',
      dynamicTags2: [],
      inputVisible2: false,
      inputValue2: ''
    }
  },
  created() {
    const isLogin = localStorage.getItem('isLogin')
    if (isLogin == 'false') {
      this.$router.push({ name: 'home' })
      return
    }
    this.getData()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.loading = true
      voyageRegList(this.params).then(res => {
        this.tableData = res.page.records
        this.total = Number(res.page.total)
        this.loading = false
      })
    },
    // 新增
    handleAdd() {
      this.title = '新增'
      this.open = true
    },
    // 编辑
    handleEdit(row) {
      this.title = '编辑'
      this.open = true
      this.form = JSON.parse(JSON.stringify(row))
      this.form.start_date = new Date(this.form.voyage_start_date)
      this.form.end_date = new Date(this.form.voyage_end_date)
      this.dynamicTags1 = this.form.funding_org.split('、')
      this.form.funding_org_array = this.dynamicTags1
      this.dynamicTags2 = this.form.voyage_officer.split('、')
      this.form.voyage_officer_array = this.dynamicTags2
    },
    // 表单参数处理
    formatParams() {
      this.form.funding_org_array = this.dynamicTags1
      this.form.funding_org = this.dynamicTags1.join('、')
      this.form.voyage_officer_array = this.dynamicTags2
      this.form.voyage_officer = this.dynamicTags2.join('、')
      this.form.voyage_start_date = time(this.form.start_date, 'date')
      this.form.voyage_end_date = time(this.form.end_date, 'date')
    },
    // 提交表单
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.title === '新增') {
            this.formatParams()
            voyageRegEdit(this.form).then(res => {
              this.$message.success('已创建新的航次信息!')
              this.getData()
              this.cancel()
            })
          } else {
            this.formatParams()
            voyageRegEdit(this.form).then(res => {
              this.$message.success('航次信息已更新!')
              this.getData()
              this.cancel()
            })
          }
        }
      })
    },
    // 关闭弹窗
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        voyage_name: '',
        ship_name: '',
        serect_status: '',
        start_date: '',
        end_date: '',
        voyage_officer_array: [],
        funding_org_array: [],
        funding_code: '',
        voyage_remark: '',
        voyage_officer: '',
        funding_org: '',
        voyage_start_date: '',
        voyage_end_date: ''
      }
      this.dynamicTags1 = []
      this.dynamicTags2 = []
      this.$refs['form'].resetFields()
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除该航次数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        voyageRegDelete(row).then(() => {
          this.$message.success('删除成功!')
          this.getData()
        })
      }).catch(() => {})
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val
      this.params.start = val * this.params.limit - this.params.limit
      this.getData()
    },
    handleSizeChange(val) {
      this.params.limit = val
      this.getData()
    },
    handleClose(type, tag) {
      if (type === 1) {
        this.dynamicTags1.splice(this.dynamicTags1.indexOf(tag), 1)
      }
      if (type === 2) {
        this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1)
      }
    },
    showInput(type) {
      if (type === 1) {
        this.inputVisible1 = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput1.$refs.input.focus()
        })
      }
      if (type === 2) {
        this.inputVisible2 = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput2.$refs.input.focus()
        })
      }
    },
    handleInputConfirm(type) {
      if (type === 1) {
        const inputValue1 = this.inputValue1
        if (inputValue1) {
          this.dynamicTags1.push(inputValue1)
        }
        this.inputVisible1 = false
        this.inputValue1 = ''
      }
      if (type === 2) {
        const inputValue2 = this.inputValue2
        if (inputValue2) {
          this.dynamicTags2.push(inputValue2)
        }
        this.inputVisible2 = false
        this.inputValue2 = ''
      }
    }
  },
  watch: {
    dynamicTags2(arr) {
      if (arr.length) {
        this.form.voyage_officer = this.dynamicTags2.join('、')
        this.$refs.form.clearValidate('voyage_officer')
      } else {
        this.form.voyage_officer = ''
      }
    }
  }
}
</script>

<style>
.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;
}
</style>