soc_web/src/views/resumption/plan/dialog.edit.vue

<template>
  <div class="rule-type">
    <el-dialog
      :title="id ? '编辑履职计划' : '新增履职计划'"
      :visible.sync="isShow"
      width="1500px"
    >
      <div class="page-body">
        <el-form
          :model="formData"
          :rules="formDataRules"
          size="small"
          ref="form"
          label-position="right"
          label-width="130px"
          label-prefix=":"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item prop="planName" label="计划名称:">
                <el-input
                  v-model="formData.planName"
                  :maxlength="50"
                  name="planName"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="planType" label="计划类型:">
                <el-select
                  label="计划类型"
                  v-model="formData.planType"
                  placeholder="请选择计划类型"
                  clearable
                >
                  <el-option
                    v-for="dict in dict.type.resumption_plan_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="planCycle" label="履职周期:">
                <el-select
                  prop="planCycle"
                  label="履职周期"
                  v-model="formData.planCycle"
                  placeholder="请选择履职周期"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.resumption_plan_cycle"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="planStatus" label="计划状态:">
                <el-select
                  prop="planStatus"
                  label="计划状态"
                  v-model="formData.planStatus"
                  placeholder="请选择计划状态"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.resumption_plan_status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item prop="execOrgType" label="履职机构类型:">
                <el-select
                  label="履职机构类型"
                  v-model="formData.execOrgType"
                  placeholder="请选择履职机构类型"
                  clearable
                  
                >
                  <el-option
                    v-for="item in dict.type.sys_org_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="roleList" label="履职角色:">
                <el-select
                  @visible-change="getRolesByOrg"
                  label="履职角色"
                  v-model="formData.resumptionRole"
                  placeholder="请选择履职角色"
                  multiple
                  filterable
                  @change="handleRolesChange"
                >
                  <el-option
                    v-for="item in resumptionRoles"
                    :key="item.index"
                    :label="item.roleName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="planExec" label="履职时间:">
                <el-select
                  label="履职时间"
                  v-model="formData.planExec"
                  placeholder="请选择履职时间"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.resumption_plan_exec"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="count" label="履职次数:">
                <el-input-number
                  style="margin-left: 10px"
                  v-model="formData.count"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="description" label="备注">
            <el-input
              v-model="formData.description"
              :maxlength="255"
              clearable
            />
          </el-form-item>
        </el-form>
        <el-button>新增履职内容</el-button>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            :prop="propItem.prop"
            :label="propItem.label"
            v-for="propItem in propList"
            :key="propItem.prop"
          >
            <template v-slot="{ row }">
              <span v-if="!propItem.component">{{ row[propItem.prop] }}</span>
              <component
                v-else
                v-bind:is="propItem.component"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="removeRow(index)"
                >删除</component
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as api from "@/api/resumption/plan";
import { statusOptions } from "./../../commonOption";
import { listRole } from "@/api/system/role";

export default {
  dicts: [
    "resumption_plan_type",
    "resumption_plan_cycle",
    "resumption_org_type",
    "resumption_plan_status",
    "sys_org_type",
    "resumption_plan_exec",
  ],
  data() {
    // const params = this.$route.params;
    // let o1=options;
    // let o=statusOptions;
    // debugger
    return {
      selectedValues: [],
      resumptionRoles: [],
      planName: null,
      planType: null,
      planCycle: null,
      planStatus: null,
      execOrgType: null,
      roleNames: null,
      planExec: null,
      count: 0,
      description: null,
      propItem: "",
      propList: [
        {
          label: "是否扫描",
          prop: "pointScan",
        },
        {
          label: "必须履职",
          prop: "required",
        },
        {
          label: "履职内容库",
          prop: "pointName",
        },
        {
          label: "履职项",
          prop: "itemName",
        },
        {
          label: "履职内容",
          prop: "itemDesc",
        },
        {
          label: "履职区域",
          prop: "areaName",
        },
        {
          label: "操作",
          prop: "lc-component",
          component: "el-button",
        },
      ],
      row: "",
      tableData: [],
      id: null,
      isShow: false,
      formData: this.reset(),
      formDataRules: {
        name: [{ required: true, message: "请输入履职内容库名称" }],
        type: [{ required: true, message: "请选择履职类型" }],
        orgType: [{ required: true, message: "请选择履职机构类型" }],
        status: [{ required: true, message: "请选择状态" }],
      },
      statusOptions: statusOptions,
    };
  },
  props: {
    orgTypeOptions: {
      type: Array,
    },
    ruleTypeOptions: {
      type: Array,
    },
  },
  watch: {},
  computed: {
    ...mapGetters(['orgId',"orgName"]),
  },
  methods: {
    reset() {
      return {
        planName: null,
        planType: null,
        planCycle: null,
        planStatus: null,
        execOrgType: null,
        roleNames: null,
        count: null,
        description: null,
        tableData: null,
        itemList: null,
        planExec: null,
        count:0,
        note:null,
        planCreateOrgId:null,
        planCreateOrgName:null,
      };
    },
    getRolesByOrg() {
      let params = {
        orgType: this.formData.execOrgType,
      };
      listRole(params).then((res) => {
        // console.info(res);
        this.resumptionRoles = res.rows;
      });
    },
    handleChange(value) {
      console.log(value);
      this.count = value;
    },
    async refresh(id, other) {
      this.formData = id ? (await api.get(id)).data : this.reset(other);
    },
    async show(id, other = {}) {
      this.id = id;
      this.tableData = null;
      this.formData.itemList = null;
      await this.refresh(id, other);
      console.log(id);
      if (id !== undefined) {
        await api.get(id).then((res) => {
          console.log(res);
          this.tableData = res.data.itemList;
        });
      }

      this.isShow = true;
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    },
    // 事件
    onHide() {
      this.isShow = false;
    },
    onSubmit() {
      this.$refs.form.validate(async (isValidate) => {
        this.formData.note = this.formData.description;
        this.formData.planCreateOrgId=this.orgId;
        this.formData.planCreateOrgName=this.orgName;
        if (!isValidate) return;
        this.formData.itemList = this.tableData==null?[]:this.tableData;
        this.formData.roleList = this.selectedValues;
        await api.update(this.formData);
        this.$emit("success");
        this.onHide();
      });
    },
    handleRolesChange(val){
      this.selectedValues = val.toString().split(',');
    },
    // 事件
    //apimark//
  },
  mounted() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
</style>