soc_web/src/views/resumption/ruleManager/dialog.editItem.vue

<template>
  <div class="rule-type">
    <DialogCom
      :title="!formData.id ? '新增履职项' : '编辑履职项'"
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="true"
      @close="onHide"
    >
      <div class="page-body">
        <div class="box">
          <el-form
            ref="form"
            :model="formData"
            :rules="formDataRules"
            label-width="100px"
          >
            <el-row>
              <el-col :span="20">
                <el-form-item prop="name" label="履职项">
                  <el-input
                    v-model.trim="formData.name"
                    :maxlength="255"
                    name="name"
                    placeholder="请输入履职项"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="box">
          <div style="margin-bottom: 10px">
            <el-button type="primary" @click="onEdit(-1)"
              >新增履职内容</el-button
            >
          </div>
          <el-table :data="formData.pointDtoList" border style="width: 100%">
            <el-table-column prop="name" label="履职内容">
              <template slot-scope="scope">
                <pre>{{ scope.row.name }}</pre>
              </template>
            </el-table-column>
            <el-table-column prop="areaName" label="履职区域">
            </el-table-column>
            <el-table-column prop="checkName" label="履职点位">
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="onEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="是否删除履职内容"
                  @confirm="delitem(scope.$index)"
                  style="margin-left: 20px"
                >
                  <el-button slot="reference" type="text" size="small"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">保 存</el-button>
      </div>
    </DialogCom>
    <EditPoint
      ref="editDialog"
      @submit="onPointSubmit"
      :rule="rule"
      v-bind="$attrs"
    ></EditPoint>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import EditPoint from "./dialog.editPoint.vue";
import { get, update } from "@/api/resumption/ruleManager.js";
import MessageEx from "@/components/message/messageex.js";
export default {
  data() {
    return {
      dialogVisible: false,
      formData: this.reset(),
      formDataRules: {
        name: [{ required: true, message: "请输入履职项" }],
      },
    };
  },
  props: {
    rule: {
      type: Object,
    },
  },
  watch: {},
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    reset() {
      return {
        id: null,
        name: null,
        ruleId: null,
        pointDtoList: [],
      };
    },

    async show(id) {
      const data = id ? (await get(id)).data : this.reset();
      this.formData = data;
      this.dialogVisible = true;
    },
    // 事件
    onHide() {
      this.formData = this.reset();
    },
    async onSubmit() {
      this.formData.ruleId = this.rule.id;

      this.$refs.form.validate((isValidate) => {
        if (!isValidate) {
          return;
        }
        if (
          !this.formData.pointDtoList ||
          this.formData.pointDtoList.length == 0
        ) {
          MessageEx.info("履职内容不能为空!");
          return;
        }
        update(this.formData).then((v) => {
          this.formData = this.reset();
          this.dialogVisible = false;
          this.$emit("success");
        });
      });
    },
    onclose() {
      this.dataVisible = false;
    },
    onEdit(index, row) {
      this.$refs.editDialog.show(index, { ...row });
    },
    onPointSubmit(index, point) {
      if (index >= 0) {
        this.$set(this.formData.pointDtoList, index, point);
      } else {
        this.formData.pointDtoList.push(point);
      }
    },
    delitem(val) {
      this.formData.pointDtoList.splice(val, 1);
    },
  },
  mounted() {},
  components: { EditPoint },
};
</script>

<style lang="scss" scoped>
.box {
  margin-bottom: 20px;
}
</style>