工厂模型

qushaowei

2023-10-07 99b1c362ad86b20c68c5925bd7d641c49f350d76

工厂模型

 src/views/eam/SiteAreaLineManager.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,38 @@
<template>
  <a-row
    type="flex"
    :gutter="16"
  >
    <a-col
      :md="5"
      :sm="24"
    >
      <site-area-line-manager-left />
    </a-col>
    <a-col
      :md="24-5"
      :sm="24"
    >
      <site-area-line-manager-right />
    </a-col>
  </a-row>
</template>

<script>
import SiteAreaLineManagerLeft from './modules/site/SiteAreaLineManagerLeft'
import SiteAreaLineManagerRight from './modules/site/SiteAreaLineManagerRight'
export default {
  name: 'SiteAreaLineManager',
  components: { SiteAreaLineManagerLeft, SiteAreaLineManagerRight },
  data() {
    return {
      description: '工厂/车间/建模建模'
    }
  },
  methods: {}
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>

 src/views/eam/modules/dailyMaintenanceStandard/DailyMaintenanceStandardModal.vue

@@ -587,7 +587,7 @@
        add: "/eam/maintenanceStandard/add",
        edit: "/eam/maintenanceStandard/edit",
        addDetail: "/eam/maintenanceStandardDetail/add",
        getMaintenanceCycle: "/eam/maintenanceStandardDetail/getMaintenanceCycle",
        getMaintenanceCycle: "/eam/maintenanceStandardDetail/getPeriodicMaintenanceCycle",
        realDelete: "/eam/maintenanceStandardDetail/realDelete",
        revise: '/eam/maintenanceStandard/revise',
        getReviseVersion: "/eam/maintenanceStandard/getReviseVersion",
@@ -665,23 +665,21 @@
    edit(record) {
      let that = this;
      this.initOptions();
      this.getMaintenanceCycle()
      // this.getMaintenanceCycle()
      this.dataSource = [];
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      if (record.maintenanceStandardDetaillist != undefined) {
        const temp = [...record.maintenanceStandardDetaillist];
        // for (let i = 0; i < temp.length; i++) {
        //   let r = temp[i].upload;
        //   r.src = this.getSrc(temp[i].upload);
        // }
        that.dataSource = temp;
      }
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'num', 'departId', 'teamId', 'equipmentId', 'equipmentName', 'useDepartName', 'useId', 'teamName', 'assignMode', 'version', 'remark'));
      });
      if (record.id) {
        this.maintenanceCycles = []
        this.getMaintenanceCycle(this.model.equipmentId)
        this.codeDisable = true;
        that.$nextTick(() => {
          if (that.isRevise) {
@@ -723,7 +721,9 @@
    sendEquipmentRecord(data) {
      this.dataSource = [];
      let record = data.record;
      this.getMaintenanceCycle(record.id)
      this.form.setFieldsValue({ equipmentId: record.id, equipmentName: record.num + "/" + record.name + "/" + record.model, teamId: record.teamId, teamName: record.teamId_dictText });

    },

    onDepartList() {
@@ -805,8 +805,9 @@
      })
    },

    getMaintenanceCycle() {
      getAction(this.url.getMaintenanceCycle).then((res) => {
    getMaintenanceCycle(equipmentId) {
      debugger
      getAction(this.url.getMaintenanceCycle, { equipmentId: equipmentId }).then((res) => {
        if (res.success) {
          this.maintenanceCycles = res.result
        }

 src/views/eam/modules/maintenanceCycle/MaintenanceCycleForm.vue

@@ -169,6 +169,41 @@
        </a-row>
        <a-row>
          <a-col :span="24/2">
            <a-form-item
              label="ABC标识"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-multi-select-tag
                v-model="model.equipmentImportanceId"
                :disabled="disableSubmit"
                dictCode="ABC-standard-result"
                placeholder="请选择ABC标识"
              >
                <!-- v-decorator="['equipmentImportanceId', validatorRules.equipmentImportanceId ]" -->
                <!-- dictCode="mes_base_deputy,name,id,status!='0' and del_flag!='1' and type!='0' order by num asc" -->
              </j-multi-select-tag>
            </a-form-item>
          </a-col>
          <a-col :span="24/2">
            <a-form-item
              label="保养类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <j-dict-select-tag
                allow-clear
                :disabled="disableSubmit"
                :placeholder="disableSubmit?'':'请选保养类型'"
                :triggerChange="true"
                dictCode="maintenance_type"
                v-model="model.maintenanceType"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24/2">
            <a-form-model-item
              label="版本"
              :labelCol="labelCol"
@@ -209,10 +244,11 @@
import { httpAction, getAction, requestPut } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import pick from 'lodash.pick'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'

export default {
  name: 'MaintenanceCycleForm',
  components: {},
  components: { JMultiSelectTag },
  props: {
    //表单禁用
    disabled: {

 src/views/eam/modules/site/AreaList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,383 @@
<template>
  <a-card
    :bordered="false"
    class="card-area"
  >
    <template slot="title">
      <i
        class="action-jeecg actionarea1"
        style="font-size: 18px;"
      />
      è½¦é—´
    </template>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <!-- æœç´¢åŒºåŸŸ -->
      <a-form
        layout="inline"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="车间编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <j-input
                placeholder="请输入车间编号查询"
                v-model="queryParam.num"
              ></j-input>
            </a-form-item>
          </a-col>
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="车间名称"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <j-input
                placeholder="请输入车间名称查询"
                v-model="queryParam.name"
              ></j-input>
            </a-form-item>
          </a-col>
          <span
            style="float: left;overflow: hidden;"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="6"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="searchQuery"
              >查询</a-button>
              <a-button
                style="margin-left: 8px"
                @click="searchReset"
              >重置</a-button>
            </a-col>
          </span>
        </a-row>

        <template v-if="toggleSearchStatus">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item label="编号">
                  <j-input
                    placeholder="请输入编号查询"
                    v-model="queryParam.num"
                  ></j-input>
                </a-form-item>
              </a-col>

              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item label="名称">
                  <j-input
                    placeholder="请输入名称查询"
                    v-model="queryParam.name"
                  ></j-input>
                </a-form-item>
              </a-col>

              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item label="类型">
                  <j-dict-select-tag
                    v-model="queryParam.type"
                    dictCode="work_center_type"
                    placeholder="请选择类型"
                  />
                </a-form-item>
              </a-col>

            </a-col>
          </a-row>
        </template>
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div
      class="table-operator"
      style="margin-top: 5px"
    >
      <a-button
        @click="handleAdd"
        type="primary"
        icon="plus"
      >新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-button style="margin-left: 8px">
          æ‰¹é‡æ“ä½œ
          <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item @click="batchDel">
            <a-icon type="delete" />删除
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :rowClassName="tableRowClass"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
    >
      <!--字符串超长截取省略号显示-->
      <span
        slot="remark"
        slot-scope="text"
      >
        <j-ellipsis
          :value="text"
          :length="15"
        />
      </span>
      <!--状态栏个性展示-->
      <span
        slot="status"
        slot-scope="text,record"
      >
        <a-badge
          v-if="record.status==1"
          status="success"
        />
        <span
          v-if="record.status==1"
          class="success"
        >启用</span>
        <!--{{record.status}}-->
        <a-badge
          v-if="record.status==0"
          status="error"
        />
        <span
          v-if="record.status==0"
          class="error"
        >禁用</span>
      </span>
      <span
        class="table-operation"
        slot="action"
        slot-scope="text, record"
      >
        <a
          href="javascript:;"
          @click="handleDetail(record)"
        >详情</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            æ›´å¤š
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleEdit(record)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete(record.id)"
              >
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.status==1">
              <a-popconfirm
                title="确定禁用吗?"
                @confirm="() => handleActive(record.id)"
              >
                <a>禁用</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.status==0">
              <a-popconfirm
                title="确定启用吗?"
                @confirm="() => handleActive(record.id)"
              >
                <a>启用</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>

    </a-table>
    <area-model
      ref="modalForm"
      @ok="modalFormOk"
      :nodeSelected="nodeSelected"
    ></area-model>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AreaModel from './AreaModel'
import { requestPut } from '@/api/manage'
import JInput from '@/components/jeecg/JInput'
import JEllipsis from '@/components/jeecg/JEllipsis'

export default {
  name: 'AreaList',
  mixins: [JeecgListMixin],
  components: {
    AreaModel,
    JInput,
    JEllipsis,
  },
  props: {
    nodeSelected: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      disableMixinCreated: true,
      url: {
        list: "/base/area/list",
        delete: "/base/area/delete",
        deleteBatch: "/base/area/deleteBatch",
        active: "/base/area/active",

      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '车间编号',
          align: "center",
          dataIndex: 'num',
          sorter: true,
        },
        {
          title: '车间名称',
          dataIndex: 'name',
          align: "center",
          sorter: true,
        },
        // {
        //   title: '部门',
        //   align: 'center',
        //   dataIndex: 'deptId_dictText',
        //   sorter: true,
        // },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' },
        },
        {
          width: 100,
          title: '状态',
          align: 'center',
          scopedSlots: {
            customRender: 'status',
          },
          dataIndex: 'status',
          sorter: true,
        },
        {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",

        },
      ]
    };
  },
  methods: {
    //禁用状态样式
    tableRowClass(record, index) {
      if (record.status != "1") {
        return "frozenRowClass";
      }
      return "";
    },
    handleActive(id) {
      if (!this.url.active) {
        this.$message.error("请设置url.active属性!")
        return
      }
      let that = this;
      requestPut(that.url.active, {}, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData();
        } else {
          that.$message.warning(res.message);
        }
      });
    }
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    },
    nodeSelected() {
      this.queryParam.siteId = this.nodeSelected.key;
      this.loadData();
      //初始化字典配置 åœ¨è‡ªå·±é¡µé¢å®šä¹‰
      this.initDictConfig();
    }
  },
  created() {
    this.queryParam.siteId = this.nodeSelected.key;
    this.loadData();
    //初始化字典配置 åœ¨è‡ªå·±é¡µé¢å®šä¹‰
    this.initDictConfig();
  }
}
</script>
<style>
@import '~@assets/less/common.less';
.frozenRowClass {
  color: #c9c9c9;
}
.success {
  color: green;
}
.error {
  color: red;
}
</style>

 src/views/eam/modules/site/AreaModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,268 @@
<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="车间编号"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <a-input
                :readOnly="disableSubmit"
                allow-clear
                placeholder="请输入车间编号"
                v-decorator="['num', validatorRules.num ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="车间名称"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <a-input
                :readOnly="disableSubmit"
                allow-clear
                placeholder="请输入车间名称"
                v-decorator="['name', validatorRules.name ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="部门"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <j-dict-select-tag
                :disabled="disableSubmit"
                placeholder="请选择部门"
                :triggerChange="true"
                dictCode="dept"
                v-decorator="['deptId', validatorRules.deptId]"
              />
            </a-form-item>
          </a-col>
        </a-row> -->

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="备注"
            >
              <a-textarea
                :readOnly="disableSubmit"
                placeholder="请输入备注"
                allow-clear
                v-decorator="['remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { postAction, requestPut } from '@/api/manage'
import { duplicateCheck } from '@/api/api'

export default {
  name: 'AreaForm',
  props: {
    nodeSelected: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入车间编号!' },
            { min: 0, max: 30, message: '长度不超过 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateNum },
          ]
        },
        name: {
          rules: [
            { required: true, message: '请输入车间名称!' },
            { min: 0, max: 64, message: '长度不超过 64 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateName },
          ]
        },
        deptId: {
          rules: [
            { required: false, message: '请选择部门!' },
          ]
        },
        remark: {
          rules: [
            { min: 0, max: 100, message: '长度不超过 100 ä¸ªå­—符', trigger: 'blur' },
          ]
        }
      },
      url: {
        add: "/base/area/add",
        edit: "/base/area/edit"
      },
      disableSubmit: false,
      //新增、编辑、删除、批量删除操作改变数据后刷新关联的组件的监听属性
      alterFlag: ""
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.disableSubmit = false;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'num', 'name', 'deptId', 'remark'))
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        values.siteId = this.nodeSelected.key;
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          let obj;
          if (!this.model.id) {
            obj = postAction(this.url.add, formData);
          } else {
            obj = requestPut(this.url.edit, formData, { id: this.model.id });
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
              that.alterFlag = new Date()
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    //验证 ç¼–号
    validateNum(rule, value, callback) {
      var params = {
        tableName: 'mom_base_area',
        fieldName: 'num',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("编号已存在!");
        }
      })
    },
    //验证 åç§°
    validateName(rule, value, callback) {
      var params = {
        tableName: 'mom_base_area',
        fieldName: 'name',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("名称已存在!");
        }
      })
    },
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    }
  }
}
</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>

 src/views/eam/modules/site/ProductionLineList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,341 @@
<template>
  <a-card
    :bordered="false"
    class="card-area"
  >
    <template slot="title">
      <i
        class="action-jeecg actionline1"
        style="font-size: 18px;"
      />
      äº§çº¿
    </template>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <!-- æœç´¢åŒºåŸŸ -->
      <a-form
        layout="inline"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="产线编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <j-input
                placeholder="请输入产线编号查询"
                v-model="queryParam.num"
              ></j-input>
            </a-form-item>
          </a-col>
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="产线名称"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <j-input
                placeholder="请输入产线名称查询"
                v-model="queryParam.name"
              ></j-input>
            </a-form-item>
          </a-col>
          <span
            style="float: left;overflow: hidden;"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="6"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="searchQuery"
              >查询</a-button>
              <a-button
                style="margin-left: 8px"
                @click="searchReset"
              >重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div
      class="table-operator"
      style="margin-top: 5px"
    >
      <a-button
        @click="handleAdd"
        type="primary"
        icon="plus"
      >新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-button style="margin-left: 8px">
          æ‰¹é‡æ“ä½œ
          <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item @click="batchDel">
            <a-icon type="delete" />删除
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :rowClassName="tableRowClass"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
    >
      <!--字符串超长截取省略号显示-->
      <span
        slot="remark"
        slot-scope="text"
      >
        <j-ellipsis
          :value="text"
          :length="15"
        />
      </span>
      <!--状态栏个性展示-->
      <span
        slot="status"
        slot-scope="text,record"
      >
        <a-badge
          v-if="record.status==1"
          status="success"
        />
        <span
          v-if="record.status==1"
          class="success"
        >启用</span>
        <!--{{record.status}}-->
        <a-badge
          v-if="record.status==0"
          status="error"
        />
        <span
          v-if="record.status==0"
          class="error"
        >禁用</span>
      </span>
      <span
        class="table-operation"
        slot="action"
        slot-scope="text, record"
      >
        <a
          href="javascript:;"
          @click="handleDetail(record)"
        >详情</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            æ›´å¤š
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleEdit(record)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete(record.id)"
              >
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.status==1">
              <a-popconfirm
                title="确定禁用吗?"
                @confirm="() => handleActive(record.id)"
              >
                <a>禁用</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.status==0">
              <a-popconfirm
                title="确定启用吗?"
                @confirm="() => handleActive(record.id)"
              >
                <a>启用</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>

    </a-table>
    <production-line-model
      ref="modalForm"
      @ok="modalFormOk"
      :nodeSelected="nodeSelected"
    ></production-line-model>
  </a-card>
</template>

<script>
import { requestPut } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ProductionLineModel from './ProductionLineModel'
import JInput from '@/components/jeecg/JInput'
import JEllipsis from '@/components/jeecg/JEllipsis'

export default {
  name: 'ProductionLineTable',
  mixins: [JeecgListMixin],
  components: {
    ProductionLineModel,
    JInput,
    JEllipsis,
  },
  props: {
    nodeSelected: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      disableMixinCreated: true,
      url: {
        list: "/base/productionLine/list",
        delete: "/base/productionLine/delete",
        deleteBatch: "/base/productionLine/deleteBatch",
        active: "/base/productionLine/active",

      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '产线编号',
          align: "center",
          dataIndex: 'num',
          sorter: true,
        },
        {
          title: '产线名称',
          dataIndex: 'name',
          align: "center",
          key: 'name',
          sorter: true,
        },
        // {
        //   title: '班制',
        //   dataIndex: 'shiftCategoryId_dictText',
        //   align: "center",
        //   key: 'shiftCategoryId',
        //   sorter: true,
        // },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          ellipsis: true,
          scopedSlots: { customRender: 'remark' },
        },
        {
          width: 100,
          title: '状态',
          align: 'center',
          scopedSlots: {
            customRender: 'status',
          },
          dataIndex: 'status',
          sorter: true,
        },
        {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
        },
      ]
    };
  },
  methods: {
    //禁用状态样式
    tableRowClass(record, index) {
      if (record.status != "1") {
        return "frozenRowClass";
      }
      return "";
    },
    handleActive(id) {
      if (!this.url.active) {
        this.$message.error("请设置url.active属性!")
        return
      }
      let that = this;
      requestPut(that.url.active, {}, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData();
        } else {
          that.$message.warning(res.message);
        }
      });
    }
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    },
    nodeSelected() {
      this.queryParam.areaId = this.nodeSelected.key;
      this.loadData();
      //初始化字典配置 åœ¨è‡ªå·±é¡µé¢å®šä¹‰
      this.initDictConfig();
    }
  },
  created() {
    this.queryParam.areaId = this.nodeSelected.key;
    this.loadData();
    //初始化字典配置 åœ¨è‡ªå·±é¡µé¢å®šä¹‰
    this.initDictConfig();
  }
}
</script>
<style>
@import '~@assets/less/common.less';
.frozenRowClass {
  color: #c9c9c9;
}
.success {
  color: green;
}
.error {
  color: red;
}
</style>

 src/views/eam/modules/site/ProductionLineModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,264 @@
<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="产线编号"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <a-input
                :readOnly="disableSubmit"
                allow-clear
                placeholder="请输入产线编号"
                v-decorator="['num', validatorRules.num ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="产线名称"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <a-input
                :readOnly="disableSubmit"
                allow-clear
                placeholder="请输入产线名称"
                v-decorator="['name', validatorRules.name ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="班制"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <j-dict-select-tag
                :disabled="disableSubmit"
                placeholder="请选择班制"
                :triggerChange="true"
                dictCode="mes_base_shift_category,name,id,status!='0' and del_flag!='1'"
                v-decorator="['shiftCategoryId', {}]"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row> -->

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="描述"
            >
              <a-textarea
                :readOnly="disableSubmit"
                placeholder="请输入描述"
                allow-clear
                v-decorator="['remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { postAction, requestPut } from '@/api/manage'
import { duplicateCheck } from '@/api/api'

export default {
  name: 'ProductionLineModel',
  props: {
    nodeSelected: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入产线编号!' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateNum },
          ]
        },
        name: {
          rules: [
            { required: true, message: '请输入产线名称!' },
            { min: 0, max: 30, message: '长度不超过 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateName },
          ]
        },
        remark: {
          rules: [
            { min: 0, max: 100, message: '长度不超过 100 ä¸ªå­—符', trigger: 'blur' }
          ]
        }
      },
      url: {
        add: "/base/productionLine/add",
        edit: "/base/productionLine/edit"
      },
      disableSubmit: false,
      //新增、编辑、删除、批量删除操作改变数据后刷新关联的组件的监听属性
      alterFlag: ""
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.disableSubmit = false;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'num', 'name', 'shiftCategoryId', 'remark'))
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        values.siteId = this.nodeSelected.parentId;
        values.areaId = this.nodeSelected.key;
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          let obj;
          if (!this.model.id) {
            obj = postAction(this.url.add, formData);
          } else {
            obj = requestPut(this.url.edit, formData, { id: this.model.id });
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
              that.alterFlag = new Date()
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    //验证 ç¼–号
    validateNum(rule, value, callback) {
      var params = {
        tableName: 'mom_base_production_line',
        fieldName: 'num',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("编号已存在!");
        }
      })
    },
    //验证 åç§°
    validateName(rule, value, callback) {
      var params = {
        tableName: 'mom_base_production_line',
        fieldName: 'name',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("名称已存在!");
        }
      })
    },
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    }
  }
}
</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>

 src/views/eam/modules/site/SiteAreaLineManagerLeft.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,352 @@
<template>
  <a-card
    :loading="cardLoading"
    :bordered="false"
    title="工厂/车间/产线模型"
    style="height: 100%;"
  >
    <a-spin :spinning="loading">
      <a-alert
        type="info"
        :showIcon="true"
        style="margin-right: 54px;"
      >
        <div slot="message">
          å½“前：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
          <a
            v-if="this.currSelected.title"
            style="margin-left: 10px"
            @click="onClearSelected"
          >取消</a>
        </div>
      </a-alert>
      <div class="drawer-bootom-button">
        <a-dropdown
          :trigger="['click']"
          placement="bottomCenter"
        >
          <a-menu slot="overlay">
            <a-menu-item
              key="1"
              @click="expandAll"
            >展开所有</a-menu-item>
            <a-menu-item
              key="2"
              @click="closeAll"
            >合并所有</a-menu-item>
            <a-menu-item
              key="3"
              @click="refreshTree"
            >刷新</a-menu-item>
          </a-menu>
          <a-button>
            <a-icon type="bars" />
          </a-button>
        </a-dropdown>
      </div>

      <a-input-search
        @search="handleSearch"
        style="width:100%;margin-top: 10px"
        placeholder="检索工厂/车间/产线"
        allowClear
        v-model="searchInput"
        @change="handleChange"
      />

      <a-tree
        :checkStrictly="checkStrictly"
        :expandedKeys.sync="expandedKeys"
        :selectedKeys="selectedKeys"
        :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
        :treeData="treeDataSource"
        :autoExpandParent="autoExpandParent"
        @select="onSelect"
        @expand="onExpand"
      >
        <template
          slot="title"
          slot-scope="{ title,type }"
        >
          <Tooltip
            placement="top"
            title="企业"
          >
            <i
              v-if="type == 0"
              class="action-jeecg actioncompany2"
              style="font-size: 18px;"
            />
          </Tooltip>
          <Tooltip
            placement="top"
            title="工厂"
          >
            <i
              v-if="type == 1"
              class="action-jeecg actionsite2"
              style="font-size: 18px;"
            />
          </Tooltip>
          <Tooltip
            placement="top"
            title="车间"
          >
            <i
              v-if="type == 2"
              class="action-jeecg actionarea1"
              style="font-size: 18px;"
            />
          </Tooltip>
          <Tooltip
            placement="top"
            title="产线"
          >
            <i
              v-if="type == 3"
              class="action-jeecg actionline1"
              style="font-size: 18px;"
            />
          </Tooltip>
          <!--style="font-size: ;font-weight:bold"-->
          <span v-if="title.indexOf(searchValue) > -1">
            {{ title.substr(0, title.indexOf(searchValue)) }}
            <span class="replaceSearch">{{ searchValue }}</span>
            {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ title }}</span>
        </template>
      </a-tree>
    </a-spin>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import Tooltip from 'ant-design-vue/es/tooltip'

export default {
  name: 'SiteAreaLineManagerLeft',
  components: {
    Tooltip,
  },
  props: ['value'],
  data() {
    return {
      searchInput: '',
      cardLoading: false,
      loading: false,
      treeDataSource: [],
      selectedKeys: [],
      expandedKeys: [],
      url: {
        factoryTreeList: '/base/site/loadTree'
      },
      searchValue: '',
      dataList: [],
      autoExpandParent: true,
      checkStrictly: true,
      allTreeKeys: [],
      currSelected: {},
      hiding: false,
    }
  },
  created() {
    this.queryTreeData();
    this.closeAll();
  },
  methods: {
    getCurrSelectedTitle() {
      return !this.currSelected.title ? '' : this.currSelected.title;
    },
    onClearSelected() {
      this.hiding = true;
      this.currSelected = {};
      this.selectedKeys = [];
    },
    onSelect(selectedKeys, e) {
      this.hiding = false;
      let record = e.node.dataRef;
      this.currSelected = Object.assign({}, record);
      this.selectedKeys = [record.key];
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    queryTreeData() {
      this.loading = true;
      this.cardLoading = true;
      getAction(this.url.factoryTreeList).then((res) => {
        if (res.success) {
          this.dataList = [];
          this.allTreeKeys = [];
          this.treeDataSource = res.result;
          this.generateList(res.result);
        } else {
          this.$message.warn(res.message);
        }
      }).finally(() => {
        this.loading = false;
        this.cardLoading = false;
      })
    },
    handleChange() {
      let search = this.searchInput;
      let expandedKeys = this.dataList
        .map(item => {
          if (item.title.indexOf(search) > -1) {
            return this.getParentKey(item.key, this.treeDataSource);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        expandedKeys,
        searchValue: search,
        autoExpandParent: true,
      });
    },
    handleSearch(value) {
      let search = value;
      let expandedKeys = this.dataList
        .map(item => {
          if (item.title.indexOf(search) > -1) {
            return this.getParentKey(item.key, this.treeDataSource);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        expandedKeys,
        searchValue: search,
        autoExpandParent: true,
      });
    },
    getParentKey(key, tree) {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some(item => item.key === key)) {
            parentKey = node.key;
          } else if (
            this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    },

    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        const title = node.title;
        const type = node.type;

        this.dataList.push({ key, title: title });
        this.allTreeKeys.push(key);
        if (node.children) {
          this.generateList(node.children);
        }
      }
    },
    expandAll() {
      this.expandedKeys = this.allTreeKeys;
    },
    closeAll() {
      this.expandedKeys = ['-1'];
    },
    refreshTree() {
      this.queryTreeData();
    }
  },
  mounted() {
    this.$bus.$on('queryTreeData', this.queryTreeData);
  },
  //监听
  watch: {
    currSelected(val) {//监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      this.$bus.$emit('getCurrSelected', val);
    },
  }
}
</script>

<style scoped>
.replaceSearch {
  color: #40a9ff;
  font-weight: bold;
  background-color: rgb(204, 204, 204);
}
/*隐藏树的默认icon*/
.ant-tree-switcher-noop {
  display: none !important;
}
/*隐藏树的默认竖线*/
.ant-tree.ant-tree-show-line li:not(:last-child):before {
  border-left: 0px;
}

.ant-card-body .table-operator {
  margin: 15px;
}

.anty-form-btn {
  width: 100%;
  text-align: center;
}

.anty-form-btn button {
  margin: 0 5px;
}

.anty-node-layout .ant-layout-header {
  padding-right: 0;
}

.header {
  padding: 0 8px;
}

.header button {
  margin: 0 3px;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

#app .desktop {
  height: auto !important;
}

/** Button按钮间距 */
.ant-btn {
  margin-left: 3px;
}
.ant-alert {
  padding: 5px 15px 5px 37px;
}
.drawer-bootom-button {
  position: absolute;
  top: 1px;
  /* padding: 10px 16px; */
  text-align: left;
  right: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>

 src/views/eam/modules/site/SiteAreaLineManagerRight.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,41 @@
<template>
  <keep-alive>
    <site-list v-if="nodeType === 0"></site-list>
    <area-list
      v-else-if="nodeType === 1"
      :nodeSelected="nodeSelected"
    ></area-list>
    <production-line-list
      v-else-if="nodeType === 2"
      :nodeSelected="nodeSelected"
    ></production-line-list>
  </keep-alive>
</template>

<script>
import SiteList from "./SiteList";
import AreaList from "./AreaList";
import ProductionLineList from "./ProductionLineList";
export default {
  name: 'SiteAreaLineManagerRight',
  components: { SiteList, AreaList, ProductionLineList },
  data() {
    return {
      description: '工厂车间主数据',
      currentOrgCode: '',
      nodeType: 0,
      nodeSelected: {}
    }
  },
  methods: {},
  mounted() {
    this.$bus.$on('getCurrSelected', (data) => {  //getCurrSelected äº‹ä»¶ æŽ¥æ”¶ç»„件传递的参数
      this.nodeType = (data.type == undefined ? 0 : data.type);
      this.nodeSelected = data;
    })
  },
}
</script>

<style scoped>
</style>

 src/views/eam/modules/site/SiteList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,310 @@
<template>
  <a-card
    :bordered="false"
    class="card-area"
  >
    <template slot="title">
      <i
        class="action-jeecg actionsite2"
        style="font-size: 18px;"
      />
      å·¥åŽ‚
    </template>
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <!-- æœç´¢åŒºåŸŸ -->
      <a-form
        layout="inline"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="工厂编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <j-input
                placeholder="请输入工厂编号查询"
                v-model="queryParam.num"
              ></j-input>
            </a-form-item>
          </a-col>
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-item
              label="工厂名称"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <j-input
                placeholder="请输入工厂名称查询"
                v-model="queryParam.name"
              ></j-input>
            </a-form-item>
          </a-col>
          <span
            style="float: left;overflow: hidden;"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="6"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="searchQuery"
              >查询</a-button>
              <a-button
                style="margin-left: 8px"
                @click="searchReset"
              >重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div
      class="table-operator"
      style="margin-top: 5px"
    >
      <a-button
        @click="handleAdd"
        type="primary"
        icon="plus"
      >新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-button style="margin-left: 8px">
          æ‰¹é‡æ“ä½œ
          <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item @click="batchDel">
            <a-icon type="delete" />删除
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :rowClassName="tableRowClass"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
    >
      <!--字符串超长截取省略号显示-->
      <span
        slot="remark"
        slot-scope="text"
      >
        <j-ellipsis
          :value="text"
          :length="15"
        />
      </span>
      <!--状态栏个性展示-->
      <span
        slot="status"
        slot-scope="text,record"
      >
        <a-badge
          v-if="record.status==1"
          status="success"
        />
        <span
          v-if="record.status==1"
          class="success"
        >启用</span>
        <!--{{record.status}}-->
        <a-badge
          v-if="record.status==0"
          status="error"
        />
        <span
          v-if="record.status==0"
          class="error"
        >禁用</span>
      </span>

      <span
        class="table-operation"
        slot="action"
        slot-scope="text, record"
      >
        <a
          href="javascript:;"
          @click="handleDetail(record)"
        >详情</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            æ›´å¤š
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleEdit(record)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete(record.id)"
              >
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.status==1">
              <a-popconfirm
                title="确定禁用吗?"
                @confirm="() => handleActive(record.id)"
              >
                <a>禁用</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.status==0">
              <a-popconfirm
                title="确定启用吗?"
                @confirm="() => handleActive(record.id)"
              >
                <a>启用</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>

    </a-table>
    <site-model
      ref="modalForm"
      @ok="modalFormOk"
    ></site-model>
  </a-card>
</template>

<script>
import { requestPut } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SiteModel from './SiteModel'
import JInput from '@/components/jeecg/JInput'
import JEllipsis from '@/components/jeecg/JEllipsis'

export default {
  name: 'SiteList',
  mixins: [JeecgListMixin],
  components: {
    SiteModel,
    JInput,
    JEllipsis,
  },
  data() {
    return {
      url: {
        list: "/base/site/list",
        delete: "/base/site/delete",
        deleteBatch: "/base/site/deleteBatch",
        active: "/base/site/active",
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '工厂编号',
          align: "center",
          dataIndex: 'num',
          sorter: true,
        },
        {
          title: '工厂名称',
          dataIndex: 'name',
          align: "center",
          key: 'name',
          sorter: true,
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          ellipsis: true,
          scopedSlots: { customRender: 'remark' },
        },
        {
          width: 100,
          title: '状态',
          align: 'center',
          scopedSlots: {
            customRender: 'status',
          },
          dataIndex: 'status',
          sorter: true,
        },
        {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
        },
      ]
    };
  },
  methods: {
    //禁用状态样式
    tableRowClass(record, index) {
      if (record.status != "1") {
        return "frozenRowClass";
      }
      return "";
    },
    handleActive(id) {
      let that = this;
      requestPut(that.url.active, {}, { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData();
        } else {
          that.$message.warning(res.message);
        }
      });
    },
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    }
  }
}
</script>
<style>
@import '~@assets/less/common.less';
.frozenRowClass {
  color: #c9c9c9;
}
.success {
  color: green;
}
.error {
  color: red;
}
</style>

 src/views/eam/modules/site/SiteModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,238 @@
<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="工厂编号"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <a-input
                :readOnly="disableSubmit"
                allow-clear
                placeholder="请输入工厂编号"
                v-decorator="['num', validatorRules.num ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              label="工厂名称"
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
            >
              <a-input
                :readOnly="disableSubmit"
                allow-clear
                placeholder="请输入工厂名称"
                v-decorator="['name', validatorRules.name ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :labelCol="{span:4}"
              :wrapperCol="{span:18}"
              label="描述"
            >
              <a-textarea
                :readOnly="disableSubmit"
                placeholder="请输入描述"
                allow-clear
                v-decorator="['remark', validatorRules.remark]"
              />
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { postAction, requestPut } from '@/api/manage'
import { duplicateCheck } from '@/api/api'

export default {
  name: 'SiteForm',
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: {
          rules: [
            { required: true, message: '请输入工厂编号!' },
            { min: 0, max: 30, message: '长度在 0 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateNum },
          ]
        },
        name: {
          rules: [
            { required: true, message: '请输入工厂名称!' },
            { min: 2, max: 30, message: '长度在 2 åˆ° 30 ä¸ªå­—符', trigger: 'blur' },
            { validator: this.validateName },
          ]
        },
        remark: {
          rules: [
            { min: 0, max: 100, message: '长度不超过 100 ä¸ªå­—符', trigger: 'blur' },
          ]
        }
      },
      url: {
        add: "/base/site/add",
        edit: "/base/site/edit"
      },
      disableSubmit: false,
      //新增、编辑、删除、批量删除操作改变数据后刷新关联的组件的监听属性
      alterFlag: ""
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      this.disableSubmit = false;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'num', 'name', 'remark'))
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // è§¦å‘表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          let obj;
          if (!this.model.id) {
            obj = postAction(this.url.add, formData);
          } else {
            obj = requestPut(this.url.edit, formData, { id: this.model.id });
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
              that.alterFlag = new Date();
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    //验证 ç¼–号
    validateNum(rule, value, callback) {
      var params = {
        tableName: 'mom_base_site',
        fieldName: 'num',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("编号已存在!");
        }
      })
    },
    //验证 åç§°
    validateName(rule, value, callback) {
      var params = {
        tableName: 'mom_base_site',
        fieldName: 'name',
        fieldVal: value,
        dataId: this.model.id,
        //数据库中存在字段del_flag并使用该字段作为未删除策略，真删除：false å‡åˆ é™¤ï¼štrue
        delFlag: 'true',
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback();
        } else {
          callback("名称已存在!");
        }
      })
    },
  },
  watch: {
    alterFlag() {
      this.$bus.$emit('queryTreeData');
    }
  }
}
</script>

<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>