yxk-electronic-archives/src/views/system/archivesCategory/archiveSealSetting/index.vue

<template>
  <div v-loading="infoLoading" class="setting-contanier">
    <div class="chapter-tip">
      <p>注意</p>
      <span>档号章一般盖在归档文件首页上端居中的空白位置，如果位置被占用，可将盖在首页上端其他空白处（居左或居右）。</span>
    </div>
    <div class="chapter-setting">
      <div class="chapter-format">
        <div class="chapter-item">
          <p class="item-title">归档章版式</p>
          <span class="item-selected">{{ filingName }}</span>
        </div>
        <div v-if="filingName && formatData.length !== 0" class="chapter-item">
          <p class="item-title">预览</p>
          <div class="format-style">
            <span v-for="item in formatData" :key="item.id">{{ item.fieldCnName }}</span>
          </div>
        </div>
      </div>
      <div class="chapter-position">
        <div class="chapter-item">
          <p class="item-title">归档章位置</p>
          <span class="item-selected">{{ filingPositionName }}</span>
        </div>
        <div class="position-style">
          <!-- top-left / top-middle / top-right / middle-left / center / middle-right / bottom-left / bottom-middle / bottom-right -->
          <span v-if="filingPositionNumber===0" class="top-middle" />
          <span v-if="filingPositionNumber===1" class="top-left " />
          <span v-if="filingPositionNumber===2" class="top-right" />
          <span v-if="filingPositionNumber===3" class="center" />
          <span v-if="filingPositionNumber===4" class="middle-left" />
          <span v-if="filingPositionNumber===5" class="middle-right" />
          <span v-if="filingPositionNumber===6" class="bottom-middle" />
          <span v-if="filingPositionNumber===7" class="bottom-left" />
          <span v-if="filingPositionNumber===8" class="bottom-right" />
        </div>
      </div>
      <div class="chapter-enable">
        <div class="chapter-item">
          <p class="item-title">是否启用</p>
          <el-switch v-model="isFiling" class="isEnable-chapter" @change="changeStatus" />
        </div>
        <div class="chapter-edit">
          <el-button size="mini" @click="cuDialogVisible = true">
            <i class="iconfont icon-bianji" />
            编辑
          </el-button>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="cuDialogVisible" :title="title">
      <div class="setting-dialog">
        <el-form ref="form" :model="form" size="small" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="归档章版式" prop="filingId">
                <el-select v-model="form.filingId" @change="changeFormat($event)">
                  <el-option v-for="option in formatOptions" :key="option.id" :label="option.name" :value="option.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="归档章位置" prop="filingPosition">
                <el-select v-model="form.filingPosition">
                  <el-option v-for="option in positionOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="form.filingId && formatData.length !== 0" class="format-style">
          <span v-for="item in formatData" :key="item.id">{{ item.fieldCnName }}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cuDialogVisible = false">取消</el-button>
        <el-button v-loading="loading" type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FetchGetFilingsealFormat, FetchGetFilingsealFormatDtails, FetchEditCategoryFilingseal, FetchEnabledFilingseal } from '@/api/system/category/category'
import { form } from '@crud/crud'
const defaultForm = {
  id: null,
  filingId: null,
  filingPosition: null
}
export default {
  name: 'ArchiveSealSetting',
  components: { },
  mixins: [form(defaultForm)],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      infoLoading: false,
      isFiling: true,
      filingName: '',
      filingPositionNumber: '',
      filingPositionName: '',
      title: '编辑归档章',
      cuDialogVisible: false,
      loading: false,
      formatOptions: [],
      formatData: [],
      positionOptions: [
        {
          label: '顶部居中',
          value: 0
        },
        {
          label: '顶部居左',
          value: 1
        },
        {
          label: '顶部居右',
          value: 2
        },
        {
          label: '中部居中',
          value: 3
        },
        {
          label: '中部居左',
          value: 4
        },
        {
          label: '中部居右',
          value: 5
        },
        {
          label: '底部居中',
          value: 6
        },
        {
          label: '底部居左',
          value: 7
        },
        {
          label: '底部居右',
          value: 8
        }
      ],
      rules: {
        filingId: [
          { required: true, message: '请选择归档章版式', trigger: 'change' }
        ],
        filingPosition: [
          { required: true, message: '请选择归档章位置', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    selectedCategory: function(newValue, oldValue) {
    }
  },
  created() {
    this.getFilingsealFormat()
    this.getPosition()
  },
  methods: {
    getFilingsealFormat() {
      FetchGetFilingsealFormat().then((res) => {
        this.formatOptions = res
        if (this.selectedCategory.filingId) {
          this.form.filingId = this.selectedCategory.filingId
          res.map(item => {
            if (item.id === this.selectedCategory.filingId) {
              this.filingName = item.name
              this.changeFormat(this.selectedCategory.filingId)
            }
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getPosition() {
      this.isFiling = this.selectedCategory.isFiling
      this.positionOptions.map(item => {
        if (item.value === this.selectedCategory.filingPosition) {
          this.filingPositionName = item.label
          this.filingPositionNumber = item.value
          this.form.filingPosition = item.value
        }
      })
    },
    changeFormat(value) {
      this.formatData = []
      if (value) {
        FetchGetFilingsealFormatDtails(value).then((res) => {
          this.formatData = res.sort((a, b) => {
            if (a.row === b.row) {
              return a.line - b.line // 如果 row 相同，则按 line 升序排序
            } else {
              return a.row - b.row // 否则，按 row 升序排序
            }
          })
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 改变状态
    changeStatus(data) {
      this.$confirm('此操作将禁用 / 启用当前归档章' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const params = {
          'id': this.selectedCategory.id,
          'isFiling': data
        }
        FetchEnabledFilingseal(params).then(res => {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 2500
          })
          this.crud.refresh()
          localStorage.setItem('categoryTabIndex', 6)
        }).catch(() => {
          data = !data
        })
      }).catch(() => {
        this.$message({
          message: '已取消修改',
          type: 'info',
          duration: 2500
        })
        data = !data
      })
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.infoLoading = true
          this.loading = true
          const params = {
            'filingId': this.form.filingId,
            'filingPosition': this.form.filingPosition,
            'id': this.selectedCategory.id,
            'isType': this.selectedCategory.isType,
            'pid': this.selectedCategory.pid
          }
          FetchEditCategoryFilingseal(params).then((res) => {
            this.$message({
              message: '保存成功',
              type: 'success',
              duration: 2500
            })
            this.cuDialogVisible = false
            this.loading = false
            this.infoLoading = false
            this.crud.refresh()
            localStorage.setItem('categoryTabIndex', 6)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin setting-box-style{
  [data-theme="dark"] & {
    padding: 0 20px 20px 20px;
    margin-top: -10px;
  }
  [data-theme="light"] & {
    margin-top: 20px;
  }
}

.setting-contanier{
  @include setting-box-style;
}

.position-style{
  position: relative;
  width: 380px;
  height: 538px;
  background: url('~@/assets/images/system/xt-gdz.png') no-repeat;
  background-size: contain;
  span{
    position: absolute;
    width: 118px;
    height: 32px;
    background: url('~@/assets/images/system/xt-gdx.png') no-repeat;
    background-size: contain;
    &.top-left{
      top: 35px;
      left: 25px;
    }
    &.top-middle{
      top: 35px;
      left: 50%;
      margin-left: -49px;
    }
    &.top-right{
      top: 35px;
      right: 15px;
    }
    &.middle-left{
      left: 25px;
      top: 50%;
      margin-top: -16px;
    }
    &.center{
      left: 50%;
      top: 50%;
      margin-left: -49px;
      margin-top: -16px;
    }
    &.middle-right{
      top: 50%;
      right: 15px;
      margin-top: -16px;
    }
    &.bottom-left{
      bottom: 35px;
      left: 25px;
    }
    &.bottom-middle{
      bottom: 35px;
      left: 50%;
      margin-left: -49px;
    }
    &.bottom-right{
      bottom: 35px;
      right: 15px;
    }
  }
}

::v-deep .el-dialog .el-dialog__body{
  padding-bottom: 0;
  .format-style{
    margin-left: 100px;
  }
}
.dialog-footer{
  margin-top: 20px;
}

</style>