spfm-market-front/src/pages/main/performance/mould.vue

<template>
  <div>
    <div class="simple-container">
      <simple-form
        :form="table_form"
        :handle="table_handle"
        @search="handleSearch"
        @add="handleAdd"
      ></simple-form>
      <simple-table
        :list="table_list"
        :config="table_config"
        :loading="table_loading"
        :handle-row="table_handle_row"
        @issue="handleVisible('issue')"
        @detail="handleVisible('template')"
      ></simple-table>
      <simple-pagination
        :page="page"
        :total="total"
        @change="handleChange"
      ></simple-pagination>
    </div>
    <simple-dialog
      title="查看模板"
      width="1200px"
      @cancel="handleVisible('template')"
      @confirm="handleVisible('template')"
      :visible="template_visible"
    >
      <analysis />
    </simple-dialog>
    <simple-dialog
      title="下发"
      width="500px"
      @cancel="handleVisible('issue')"
      @confirm="handleVisible('issue')"
      :visible="issue_visible"
    >
      <el-form label-width="100px" :model="form">
        <el-form-item label="填报事由">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="填报注意事项">
          <el-input v-model="form.region"></el-input>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-upload
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div>上传附件</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </simple-dialog>
    <simple-dialog
      :title="title"
      :visible="visible"
      :reload="reload"
      :width="width"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="可编辑列"
          ><el-input v-model="form.editrows"
        /></el-form-item>
        <el-form-item label="权限规则">
          <el-select v-model="form.rule">
            <el-option
              v-for="item in ruleoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
        ></el-form-item>
        <el-form-item label="负责人">
          <el-cascader-panel
            v-model="form.charge"
            :options="chargeoptions"
            clearable
            @change="handleCascader"
          ></el-cascader-panel
        ></el-form-item>
      </el-form>
    </simple-dialog>
  </div>
</template>

<script>
import analysis from "./analysis.vue";
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
import simpleDialog from "./components/dialog.vue";
import simplePagination from "./components/pagination.vue";
export default {
  components: {
    analysis,
    simpleTable,
    simpleDialog,
    simpleForm,
    simplePagination,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      form: {},
      //   dialog
      title: "权限设置",
      visible: false,
      reload: 0,
      width: "700px",
      form: {},
      ruleoptions: [
        {
          value: "按行号",
          label: "按行号",
        },
        {
          value: "按科室分配",
          label: "按科室分配",
        },
        {
          value: "按负责人分配",
          label: "按负责人分配",
        },
        {
          value: "所有人员",
          label: "",
        },
      ],
      chargeoptions: [
        {
          label: "科室名称1",
          value: "科室名称1",
          children: [
            {
              label: "负责人",
              value: "负责人",
              children: [{ label: "尹强", value: "尹强" }],
            },
          ],
        },
      ],
      template_visible: false,
      issue_visible: false,
      table_loading: false,
      table_search: {},
      table_form: [
        {
          label: "模板名称",
          props: "template_name",
          type: "input",
        },
      ],
      table_list: [],
      table_handle: [
        {
          label: "新增模板",
          props: "add",
        },
      ],
      table_handle_row: [
        {
          label: "下发",
          props: "issue",
        },
        {
          label: "查看",
          props: "detail",
        },
        {
          label: "删除",
          props: "delete",
          popconfirm: true,
        },
      ],
      table_config: [
        {
          label: "模板名称",
          props: "template_name",
        },
        {
          label: "配置时间",
          props: "template_date",
        },
        {
          label: "配置工号",
          props: "template_number",
        },
        {
          label: "模板分类",
          props: "template_class",
        },
        {
          label: "模板状态",
          props: "template_status",
        },
        {
          label: "模板类型",
          props: "template_type",
        },
      ],
    };
  },
  methods: {
    async handleInit() {
      this.table_loading = true;
      const data = [];
      let index = 0;
      while (index < 10) {
        data.push({
          template_name: `模板${index}`,
          template_date: "2021-12-01 12:00:00",
          template_number: `NUMBER${index}`,
          template_class: `部门绩效${index}`,
          template_status: `在用`,
          template_type: `科室绩效${index}`,
        });
        index = index + 1;
      }
      this.total = index;
      this.table_list = data;
      this.table_loading = false;
    },
    handleSearch({ template_name }) {
      this.table_search = { template_name };
      this.handleReset();
      this.handleInit();
    },
    handleAdd() {
      this.visible = true;
    },
    // 级联选择
    handleCascader(data) {
      console.log(data, "data");
    },
    handleChange(page) {
      this.page = page;
      this.handleInit();
    },
    handleVisible(props) {
      switch (props) {
        case "template":
          this.template_visible = !this.template_visible;
          break;
        case "issue":
          this.issue_visible = !this.issue_visible;
      }
    },
    handleReset() {
      this.page = 1;
    },
    handleConfirm(visible) {
      this.reload++;
      this.params = {};
      this.visible = visible;
      console.log(this.params, "handleConFirm");
    },
    handleCancel(data) {
      this.reload++;
      this.params = {};
      this.visible = data;
      console.log(data, "handleCancel");
    },
  },
  mounted() {
    this.handleInit();
  },
};
</script>

<style></style>