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="handleVisible('add')"
      ></simple-form>
      <simple-table
        :list="table_list"
        :config="table_config"
        :loading="table_loading"
        :handle-row="table_handle_row"
        @issue="(params) => handleVisible('issue', params)"
        @detail="(params) => handleVisible('template', params)"
        @redit="(params) => handleVisible('edit', params)"
        @delete="handleDelete"
      ></simple-table>
      <simple-pagination
        :page="page"
        :total="total"
        @change="handleChange"
      ></simple-pagination>
    </div>
    <simple-dialog
      title="下发"
      width="500px"
      @cancel="handleVisible('issue')"
      @confirm="handleIssue"
      :visible="issue_visible"
    >
      <el-form label-width="120px" :model="issue_form" ref="issue_ref">
        <el-form-item
          label="填报事由"
          prop="reason"
          :rules="{
            required: true,
            message: '填报事由不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="issue_form.reason"></el-input>
        </el-form-item>
        <el-form-item
          label="填报注意事项"
          prop="precautions"
          :rules="{
            required: true,
            message: '填报注意事项不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="issue_form.precautions"></el-input>
        </el-form-item>
        <el-form-item
          label="截止时间"
          prop="endTime"
          :rules="{
            required: true,
            message: '截止时间不能为空',
            trigger: 'change',
          }"
        >
          <el-date-picker
            v-model="issue_form.endTime"
            type="datetime"
            format="yyyy-MM-dd HH:00:00"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </simple-dialog>
    <simple-dialog
      fullscreen
      title="新增模板"
      :visible="add_visible"
      width="1200px"
      @confirm="handleVisible('add')"
      @cancel="handleVisible('add')"
    >
      <el-form inline :model="form" label-width="100px"> </el-form>
      <simple-sheet v-if="add_visible" @save="handleSave('add')" type="edit" />
      <template v-slot:footer><div></div></template>
    </simple-dialog>
    <simple-dialog
      fullscreen
      title="编辑模板"
      :visible="edit_visible"
      width="1200px"
      @confirm="handleVisible('edit')"
      @cancel="handleVisible('edit')"
    >
      <el-form inline :model="form" label-width="100px"> </el-form>
      <simple-sheet
        v-if="edit_visible"
        :id="template_id"
        @save="handleSave('edit')"
        :status="status"
        type="edit"
      />
      <template v-slot:footer><div></div></template>
    </simple-dialog>
    <simple-dialog
      title="查看模板"
      fullscreen
      @cancel="handleVisible('template')"
      @confirm="handleVisible('template')"
      :visible="template_visible"
    >
      <simple-sheet v-if="template_visible" :id="template_id" />
      <template v-slot:footer><div></div></template>
    </simple-dialog>
  </div>
</template>

<script>
import simpleForm from "./components/form.vue";
import simpleSheet from "./components/sheet.vue";
import simpleTable from "./components/table.vue";
import simpleDialog from "./components/dialog.vue";
import simplePagination from "./components/pagination.vue";
export default {
  components: {
    simpleTable,
    simpleDialog,
    simpleForm,
    simpleSheet,
    simplePagination,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      form: {},
      status: "",
      add_visible: false,
      edit_visible: false,
      // template
      template_visible: false,
      template_id: null,
      // issue
      issue_visible: false,
      issue_form: {
        reason: "",
        precautions: "",
        endTime: "",
      },
      issue_id: null,
      // table
      table_loading: false,
      table_search: {},
      table_form: [
        {
          label: "模板名称",
          props: "templateName",
          type: "input",
        },
      ],
      table_list: [],
      table_handle: [
        {
          label: "新增模板",
          props: "add",
        },
      ],
      table_handle_row: [
        {
          label: "下发",
          props: "issue",
          visible: {
            status: ["0"],
          },
        },
        {
          label: "编辑",
          props: "redit",
          visible: {
            status: ["2"],
          },
        },
        {
          label: "查看",
          props: "detail",
        },
        {
          label: "删除",
          props: "delete",
          visible: {
            status: ["0", "2"],
          },
          popconfirm: true,
        },
      ],
      table_config: [
        {
          label: "序号",
          type: "number",
        },
        {
          label: "模板名称",
          props: "templateName",
        },
        {
          label: "配置时间",
          props: "updateTime",
        },
        {
          label: "配置人员",
          props: "createId",
        },
        {
          label: "模板状态",
          props: "status",
          type: "dictionary",
          dictionary: {
            0: "已创建",
            2: "起草中",
            3: "已下发",
          },
        },
      ],
    };
  },
  methods: {
    async handleInit() {
      this.table_loading = true;
      this.$http({
        url: "/market/CMKFileTemplate/CMKFileTemplateList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          page: this.page,
          pageSize: this.rows,
          templateName: this.table_search.templateName,
        },
      }).then(({ data: { count, data } }) => {
        this.total = count;
        this.table_list = data;
        this.table_loading = false;
      });
    },
    handleSearch({ templateName }) {
      this.table_search = { templateName };
      this.handleReset();
      this.handleInit();
    },
    handleAdd() {},
    handleChange(page) {
      this.page = page;
      this.handleInit();
    },
    handleVisible(props, params) {
      switch (props) {
        case "add":
          this.add_visible = !this.add_visible;
          break;
        case "edit":
          this.edit_visible = !this.edit_visible;
          this.template_id = params ? params.id : null;
          this.status = params ? params.status : "";
          break;
        case "template":
          this.template_visible = !this.template_visible;
          // this.template_id = params?.id;
          this.template_id = params ? params.id : null;
          break;
        case "issue":
          this.issue_visible = !this.issue_visible;
          this.issue_id = params ? params.id : null;
          if (this.issue_visible) {
            this.issue_form.reason = params.reason ? params.reason : "";
            this.issue_form.precautions = params.precautions
              ? params.precautions
              : "";
            this.issue_form.endTime = params.endTime ? params.endTime : "";
          }
          break;
      }
    },
    handleReset() {
      this.page = 1;
    },
    handleDelete({ id }) {
      this.$http({
        url: "/market/CMKFileTemplate/delCMKFileTemplateById",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          templateId: id,
        },
      }).then(() => {
        this.$message.success("删除成功");
        this.handleInit();
      });
    },
    handleIssue() {
      this.$refs["issue_ref"].validate((valid) => {
        if (valid) {
          this.$http({
            url: "/market/CMKFileTemplate/issuedCMKFileTemplateById",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              ...this.issue_form,
              endTime: this.$formatDate(
                this.issue_form.endTime,
                "YYYY-MM-DD HH:00:00"
              ),
              templateId: this.issue_id,
            },
          }).then(() => {
            this.handleVisible("issue");
            this.$message.success("下发成功");
            this.handleInit();
          });
        }
      });
    },
    handleSave(type) {
      switch (type) {
        case "add":
          this.handleVisible("add");
          break;
        case "edit":
          this.handleVisible("edit");
          break;
      }

      this.handleInit();
    },
  },
  mounted() {
    this.handleInit();
  },
};
</script>

<style></style>