sstt-archives-web/src/views/organize/components/addIndex.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="40" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增组织' : '编辑组织'"
      :form="form" :rules='rules' @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>组织名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入组织名称" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:originize_type_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>组织类型：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" v-model="form.originize_type_id" @change="changeTypes" placeholder="请选择">
              <el-option v-for="item in list_types" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:area_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>所属区域：
          </div>
          <div class="xy-table-item-content">
            <el-select style="width:100%" v-model="form.area_id" @change="changeAreas" placeholder="请选择">
              <el-option v-for="item in list_areas" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:sort>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>排序：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.sort" placeholder="请输入排序" type="number" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:description>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>组织简介：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.description" type="textarea" placeholder="请输入组织简介" clearable
              style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show,
    index
  } from "@/api/system/baseForm.js"
  import {
    deepCopy,
    isNull
  } from "@/utils";
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        table_name: 'organizes',
        list_types: [],
        list_areas: [],
        form: {
          name: '',
          originize_type_id: "",
          area_id: '',
          sort: 0,
          description: '',
          originize_type_name: '',
          area_name: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入组织名称'
          }],
          originize_type_id: [{
            required: true,
            message: '请选择组织类型'
          }],
          area_id: [{
            required: true,
            message: '请选择所属区域'
          }]
        }
      }
    },
    created() {
      this.getTypeList()
      this.getAreaList()
    },
    methods: {
      submit() {
        if (this.id) {
          this.form.id = this.id
        }
        if (this.type == 'add') {
          this.form.id = ''
        }
        console.log("this.form", this.form)
        save({
          table_name: this.table_name,
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.type === 'add' ? '新增成功' : '编辑成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
          table_name: this.table_name,
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.originize_type_id = res.originize_type_id ? parseInt(res.originize_type_id) : ''
          this.form.area_id = res.area_id ? parseInt(res.area_id) : ''
        })
      },
      changeTypes(e) {
        if (e) {
          this.list_types.map(item => {
            if (item.id == e) {
              this.form.originize_type_name = item.name
              this.form.originize_type_id = item.id
            }
          })
        }
      },
      async getTypeList() {
        const res = await index({
          page_size: 999,
          page: 1,
          table_name: 'organize_types',
        })
        this.list_types = res.data
      },
      changeAreas(e) {
        if (e) {
          this.list_areas.map(item => {
            if (item.id == e) {
              this.form.area_name = item.name
              this.form.area_id = item.id
            }
          })
        }
      },
      async getAreaList() {
        const res = await index({
          page_size: 999,
          page: 1,
          table_name: 'areas',
        })
        this.list_areas = res.data
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = "add"
          this.form = {
            name: '',
            originize_type_id: "",
            sort: 0,
            description: '',
            originize_type_name: ''
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .description,
  ::v-deep .name,
  ::v-deep .sort,
  ::v-deep .originize_type_id,
  ::v-deep .area_id {
    flex-basis: 100%;
  }

</style>