peisweb/src/views/fee-settings/BigtextResultTemplateEdit.vue

<template>
  <div style="padding: 10px 0;">
    <div>
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="70px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="模板编号" prop="">
              <el-input v-model="form.id" :disabled="true" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="词条类别" prop="bigtextResultTypeId">
              <el-cascader v-model="form.bigtextResultTypeId" :options="bigtextResultTypeId" popper-class="example"
                ref="bigtextResultTypeIds" @change="ischangsItemTypeId" :props="{
                  value: 'bigtextResultTypeId',
                  label: 'displayName',
                  children: 'treeChildren',
                  checkStrictly: true,
                  expandTrigger: 'hover',
                }" size="small">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="模板名称" prop="displayName">
              <el-input v-model="form.displayName" ref="refinput" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="5">
            <el-form-item label="创建者">
              <el-input v-model="form.creatorName" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="创建时间" style="margin-left: -5%">
              <el-input :value="form.creationTime | dateFormat" disabled style="width: 90%" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="修改者" style="margin-left: -25%">
              <el-input v-model="form.creatorName" disabled size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="修改时间" style="margin-left: -5%">
              <el-input :value="form.lastModificationTime | dateFormat" disabled style="width: 90%"
                size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="display: flex;justify-content: space-between;padding: 10px 0;">
      <div></div>
      <div>
        <el-button @click="btnCancel" class="difference">取 消</el-button>
        <el-button type="primary" @click="btnSubmit" class="commonbutton">确 定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Sortable from "sortablejs";
import { getapi, postapi, deletapi } from "@/api/api";
import { examinationgender, instrumentlist } from "@/request/systemapi";
import { deepCopy, objCopy, dddw, tcdate } from "../../utlis/proFunc";

export default {
  props: ["refParams", "refFunOther"],
  data() {
    return {
      form: {
        id: "",
        displayName: "",
        bigtextResultTypeId: "",
      },

      bigtextResultTypeId: [], //项目类别

      rules: {
        displayName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        bigtextResultTypeId: [
          { required: true, message: "请选择词条类别", trigger: "blur" },
        ]
      }, //表单校验对象    

    };
  },
  created() {

  },
  mounted() {
    // this.getBigtextResultType();
    this.dispEdit()
  },
  updated() {
    // this.$nextTick(() => {
    //   this.$refs.table.doLayout();
    // });
  },
  computed: {
    ...mapState(["window", "dict", "dialogWin", "dataTransOpts"]),


  },
  methods: {
    dddw,
    // 结果类别
    getBigtextResultType() {
      postapi('/api/app/BigtextResultType/GetByCodeAll').then((res) => {
        if (res.code != -1) {
          this.bigtextResultTypeId = res.data;
          tcdate(this.bigtextResultTypeId)
        }
      });
    },


    ischangsItemTypeId(v) {
      if (v) {
        this.form.bigtextResultTypeId = v[v.length - 1]
      } else {
        this.form.bigtextResultTypeId = null
      }
    },

    formFocus() {

      this.$nextTick(() => {
        this.$refs.refinput.focus();
      });

    },

    //编辑弹框
    dispEdit() {
      // 需要刷新上级节点字典库，因为有可能更新
      this.getBigtextResultType()
      console.log('this.refParams', this.refParams)

      if (this.$refs.ruleForm !== undefined) {
        this.$refs.ruleForm.resetFields();
      }
      if (this.refParams.id) {
        objCopy(this.refParams, this.form)
        postapi('/api/app/BigtextResultType/Get', { bigtextResultTemplateId: this.refParams.id }).then((res) => {
          if (res.code > -1) {
            objCopy(res.data, this.form);
            this.formFocus()
          }
        })
      } else {
        objCopy(this.refParams, this.form)
        this.formFocus()
      }
    },

    btnCancel() {
      this.dialogWin.BigtextResultTemplateEdit = false;
      // this.$refs.bigtextResultTypeIds.toggleDropDownVisible();
    },

    //确定新增或者编辑
    btnSubmit() {
      this.$refs.ruleForm.validate((v) => {
        if (v) {
          let obj = Object.assign({}, this.form, { bigtextResultTemplateId: this.form.id })

          if (!this.form.id) {
            postapi('/api/app/BigtextResultTemplate/Create', obj).then(res => {
              if (res.code > -1) {
                this.refFunOther(res.data)
                this.dataTransOpts.tableS.bigtext_result_template.id = res.data.id
                this.dialogWin.BigtextResultTemplateEdit = false;
              }
            })
          } else {
            postapi('/api/app/BigtextResultTemplate/Update', obj).then(res => {
              if (res.code > -1) {
                this.refFunOther(obj)
                this.dialogWin.BigtextResultTemplateEdit = false;
              }
            })
          }
        }
      });
    },


  },

  //监听事件
  watch: {
    //
    "dataTransOpts.refresh.bigtext_result_template.S": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log(`watch dataTransOpts.refresh.bigtext_result_template.S newVal: ${newVal}, oldVal: ${oldVal}`);
        if (newVal != oldVal) this.dispEdit()
      }
    },

  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";

.mainleftbox {
  flex: 1;
}

.Selectbutton {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mainbox {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.box {
  display: flex;
  flex-direction: column;
}

/* form表单每一项的下边距 */
:deep .el-form-item {
  margin-bottom: 14px;
}

/* 去掉input textarea的手动扩张样式 */
:deep(.el-textarea__inner) {
  resize: none;
}

/* el-dialog的头部样式 */
:deep .el-dialog__header {
  padding: 11px 20px 11px;
}

/* el-dialog的主体样式 */
:deep .el-dialog__body {
  padding: 0px 20px 0px;
}

/* el-divider样式 */
:deep .el-divider--horizontal {
  margin: 0px 0 12px;
}

/* el-dialog的底部样式 */
:deep .el-dialog__footer {
  padding: 0px 20px 14px;
}

/* 默认结果后面下拉框样式 */
:deep .downText .el-input--suffix .el-input__inner {
  width: 0;
  height: 100%;
  padding: 0 19px;
}

/* 默认结果后面下拉框图标样式 */
:deep .downText .el-input--suffix .el-input__suffix {
  right: 12px;
}

/* 默认结果后面下拉框 */
:deep .downText {
  display: flex !important;
}

/* 诊断函数后面按钮样式 */
:deep .el-input-group__append {
  padding: 0 11px;
}

/* 默认结果整体样式 */
.my-el-form-item :deep .el-form-item__content {
  line-height: 0 !important;
}

.my-el-form-item :deep .el-input__icon {
  line-height: 0 !important;
}

/* 指引信息 */
.guidelines :deep .el-form-item {
  margin-bottom: 0;
}

.seachinput {
  width: 250px;
  margin-right: 110px;
}

:deep .seachinput .el-select {
  width: 100%;
}

.layeredleftright {
  width: 95%;
  display: flex;
  flex-direction: column;
}

:deep .el-tree-node>.el-tree-node__children {
  overflow: visible;
}

:deep .el-form-item {
  margin-bottom: 8px;
}
</style>